How do I type onSuccess data in React Query?

Using TypeScript in React Query to type the data within the onSuccess callback is a best practice as it enhances code readability and maintainability, and it can catch potential errors during compilation.

First, when using React Query's useQuery or useMutation hooks to fetch data from the server or submit data, we need to define the types for the data.

For example, if we are fetching user information from an API, we can define an interface typed as User:

typescript
interface User {
  id: string;
  name: string;
  email: string;
}

// Using useQuery to fetch data
const { data, error, isLoading } = useQuery<User, Error>('user', fetchUser);

In this example, fetchUser is an asynchronous function that handles API calls and returns data. It should be defined to return a Promise<User>.

Now, when defining the onSuccess callback function, as we've specified the return type of the query as User in useQuery, the parameter type of onSuccess is automatically inferred as User:

typescript
useQuery<User, Error>('user', fetchUser, {
  onSuccess: (data) => {
    console.log("User data:", data);
    // Here, you can safely access data.id, data.name, and data.email
  },
  onError: (error) => {
    console.error("Error occurred:", error.message);
  }
});

In this code snippet, the data parameter in onSuccess has been inferred by TypeScript as the User type, allowing safe access to properties like data.id, data.name, and data.email. Additionally, if you attempt to access any non-existent properties of data, TypeScript will report errors at compile time.

This guarantees not only type safety in the code but also improves code quality and reduces the likelihood of runtime errors.