How can I use React Query for managing server state?

How can I use React Query for managing server state?

React Query is a powerful library for fetching, caching, and updating server state in React applications. It simplifies data fetching and state management.

What are the main features of React Query?

Some main features include automatic caching, background data synchronization, and built-in support for pagination and infinite scrolling.

Can you show me a basic example of using React Query?

Sure! Here's a simple 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>{JSON.stringify(data)}</div>;
};

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

How does React Query handle caching?

React Query automatically caches the data it fetches. You can configure cache time and stale time to control how long data remains fresh.