To start using React Query in your React project, you first need to install the core library. Open your terminal and run the following command:

npm install @tanstack/react-query

Once installed, you need to set up React Query so it can manage and cache your server state throughout your app. This is done by creating a QueryClient instance and wrapping your app with the QueryClientProvider. The provider makes the React Query client available to all components in your component tree.

Begin by importing the necessary modules at the top of your main entry file (commonly src/index.js or src/main.jsx):

import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

Next, create a new QueryClient instance:

const queryClient = new QueryClient();

Finally, wrap your app with the QueryClientProvider, passing the queryClient as a prop:

<QueryClientProvider client={queryClient}>
  <App />
</QueryClientProvider>

This setup ensures that any component in your app can use React Query hooks for data fetching and mutation.

The QueryClient is the central manager for all queries and mutations in your React application. It handles caching, background updates, and shared state for your server data. You can customize its behavior by passing a configuration object when you create it.

Some common configuration options include:

• DefaultOptions: set default behaviors for queries and mutations, such as how often data should be refetched;
• QueryCache: customize the cache implementation for queries;
• MutationCache: customize the cache implementation for mutations.

For example, you can set a default stale time for all queries by initializing the client like this:

const queryClient = new QueryClient({
  defaultOptions: {
    queries: {
      staleTime: 1000 * 60 * 5, // Data is considered fresh for 5 minutes
    },
  },
});

This makes it easy to control how React Query manages and serves your data throughout your app.