Initializing TanStack Store in a React Application

Demonstrate how to set up TanStack Store in a React app, including creating a store and providing it at the top level of your application.

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

// Create a client
const queryClient = new QueryClient();

This code block imports the necessary parts from react-query and initializes a new QueryClient. This QueryClient will manage all of the queries for your application.

import React from 'react';
import ReactDOM from 'react-dom';
import { QueryClientProvider } from 'react-query';
import App from './App';
import { queryClient } from './queryClient';

ReactDOM.render(
  <QueryClientProvider client={queryClient}>
    <App />
  </QueryClientProvider>,
  document.getElementById('root')
);

This snippet shows how to wrap your top-level <App> component with <QueryClientProvider> while passing the queryClient instance. This will make the QueryClient available to any component in your app that needs to use react-query.