When building React applications, you often need to fetch data from APIs and manage asynchronous logic. Libraries like React Query have popularized patterns for handling data fetching, caching, and error states in a way that is both scalable and type-safe. By leveraging TypeScript, you can create your own custom hooks for data fetching that are fully typed, making your code safer and your developer experience smoother.

To type custom hooks for data fetching, you typically use generics to allow the hook to work with any data shape returned by your API. This means you can write one hook and reuse it for different endpoints, specifying the expected data type each time. For example, a generic hook might look like useQuery<T>(), where T represents the type of data you expect from the API. This approach ensures that TypeScript can catch type errors early and provide accurate autocompletion wherever the hook is used.

When designing the return value of a data fetching hook, you usually provide an object that includes properties such as data, error, and isLoading. Typing these properties is essential so that any component using the hook knows exactly what type of data to expect, what kind of error may be present, and when the data is still loading. This pattern is inspired by React Query and helps maintain consistency and reliability across your codebase.

Typed error handling is also crucial. By specifying the types of possible errors, you can ensure that your UI handles them gracefully and that you don't accidentally miss important error cases. This level of typing helps both during development and maintenance, making your codebase more robust in the face of API changes or unexpected responses.

Consider a scenario where you want to fetch a list of users from an API. You can define a User type and create a custom hook that uses a generic to enforce the type of the data returned. The hook's return value is an object with typed properties, following the React Query–inspired pattern.

type User = {
  id: number;
  name: string;
  email: string;
};

type QueryResult<T> = {
  data: T | undefined;
  error: Error | undefined;
  isLoading: boolean;
};

function useQuery<T>(fetchData: () => Promise<T>): QueryResult<T> {
  // Hook implementation omitted for brevity
  // Would use useState and useEffect to manage state and fetch data
  // Types ensure that data, error, and isLoading are always correctly typed
  return {
    data: undefined,
    error: undefined,
    isLoading: true,
  };
}

// Usage in a component:
const { data, error, isLoading } = useQuery<User[]>(() =>
  fetch("/api/users").then(res => res.json())
);

// data is typed as User[] | undefined
// error is typed as Error | undefined
// isLoading is a boolean

This pattern ensures that wherever you use the hook, TypeScript will enforce the correct types for the data and error, reducing bugs and improving clarity. You can also extend the QueryResult type to include additional fields, such as refetch or isFetching, to handle more advanced scenarios.