How can I integrate React Query with TypeScript?

How can I integrate React Query with TypeScript?

To integrate React Query with TypeScript, you need to install the necessary packages and set up your queries with type definitions.

What packages do I need to install?

You need to install react-query and @types/react-query for TypeScript support.

Can you show me a simple example?

Sure! Here's a basic example:

import { useQuery } from 'react-query';

const fetchData = async () => {
  const response = await fetch('https://api.example.com/data');
  return response.json();
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery('dataKey', fetchData);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;
  return <div>Data: {JSON.stringify(data)}</div>;
};

This example fetches data from an API and handles loading and error states.