Skip to main content

Setup QueryClientProvider

Create queryClient once ONLY, as it hold the query cache data.
QueryClient has default options, check it out here

src/main.tsx
import { QueryClient, QueryClientProvider } from "@tanstack/react-query";

// create once with default options
const queryClient = new QueryClient();

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

Add devtools for easier debugging

Install devtools package - more details

bun add @tanstack/react-query-devtools

src/main.tsx
import { ReactQueryDevtools } from "@tanstack/react-query-devtools";

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <App />
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

Core concepts

#	Name	Desc
1	Queries	Promise based to fetch data from API, binding to an `unique key`
2	Mutations	Used to modify query data (create/update/delete) or perform server side-effects
3	Query Invalidation	Smart invalidate queries and potentially trigger refetch

More details: https://tanstack.com/query/latest/docs/react/quick-start

Notes

Data fetching is not handled by React Query, it will be handled by axios/fetch/... lib instead
React Query will manage the data return from a Promise (specifically APIs in our case)
Fetching data can come from HTTP method GET or POST

Add devtools for easier debugging
Core concepts