SamwithCode

QueryClient & Provider in Tan Stack Query 2025

QueryClient & Provider in Tan Stack Query 2025

TanStack Query (also known as React Query) is a powerful data-fetching library that simplifies asynchronous data management in React applications. To start using it, you first need to create a `QueryClient` and wrap your app with the `QueryClientProvider`.

1. Install TanStack Query

npm install @tanstack/react-query

2. Create a QueryClient

First, import the required functions and create a `QueryClient` instance: 

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

const queryClient = new QueryClient();

3. Wrap your App with QueryClientProvider

Use `QueryClientProvider` to pass the client to your entire React app: 

import { QueryClientProvider } from '@tanstack/react-query';
import App from './App';

const queryClient = new QueryClient();

ReactDOM.createRoot(document.getElementById('root')).render(
  
    
  
);

4. Now you can use `useQuery` and other hooks

Once the provider is set, you can use React Query hooks like `useQuery`, `useMutation`, etc., anywhere in your app.

React Query handles caching, background refetching, and simplifies API calls.