Response Type

Typing the response of an API request is one of the most significant benefits of using TypeScript with a data-fetching library. Hyper-fetch makes it easy to define a response type for each request. This means you get full type safety and autocompletion for the data you receive, preventing runtime errors and making your code easier to reason about.

What you'll learn

1. How to define the expected response type for a request.
2. How the response type provides type safety and autocompletion for the returned data.
3. How to handle both successful data and null responses.

Why is it helpful?

• Runtime Error Prevention: Eliminates undefined is not a function errors by ensuring you only access properties that exist on the response data.
• Code Reliability: Makes your components and functions more robust by guaranteeing the shape of the data they work with.
• Faster Development: IDE autocompletion for response data properties speeds up coding and reduces the need to check API documentation.
• Self-Documenting: The request itself becomes a source of truth for the API's response structure.

---

Example

By providing a type to the response generic, you ensure that the data returned from the .send() method is strongly typed.

// import { createClient } from '@hyper-fetch/core';

export const client = createClient()({
  url: "https://api.example.com",
});

// 1. Define the shape of a single user object
type User = {
  id: number;
  name: string;
  email: string;
};

// 2. Define the response type for the request, which is an array of users
type ResponseType = User[];

// 3. Create the request, specifying the response type
const getUsers = client.createRequest<{
  response: ResponseType;
}>()({
  endpoint: "/users",
  method: "GET",
});

// 4. When you send the request, the `data` property will be strongly typed
const { data, error } = await getUsers.send();

// `data` is of type `User[] | null`
if (data) {
  // You get autocompletion for user properties here
  data.forEach((user) => {
    console.log(user.name);
  });
}

---

Congratulations!

You've mastered setting response types!

• You can define a response type for any request to get strongly-typed data.
• You benefit from autocompletion and compile-time checks on the data you receive.
• You can write more robust code by correctly handling the typed response.