How can I use React Query with TypeScript?

How can I use React Query with TypeScript?

You can use React Query with TypeScript by defining types for your data and using them in your queries.

Can you show me an example of a query with TypeScript?

Sure! Here's a simple example:

import { useQuery } from 'react-query';

interface User {
  id: number;
  name: string;
}

const fetchUsers = async (): Promise<User[]> => {
  const response = await fetch('/api/users');
  return response.json();
};

const UsersComponent = () => {
  const { data, error, isLoading } = useQuery<User[]>('users', fetchUsers);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error fetching users</div>;

  return <ul>{data?.map(user => <li key={user.id}>{user.name}</li>)}</ul>;
};

What if I want to handle errors more gracefully?

You can use the onError callback in the useQuery options to handle errors more gracefully. Here's an example:

const { data, error, isLoading } = useQuery<User[]>('users', fetchUsers, {
  onError: (error) => {
    console.error('Error fetching users:', error);
    alert('Failed to fetch users. Please try again later.');
  },
});