Setting Up React Query in a Next.js Project

Install React Query and configure QueryClientProvider at the root of a Next.js project.
import { QueryClient, QueryClientProvider } from 'react-query';
Import QueryClient and QueryClientProvider from react-query.
const queryClient = new QueryClient();
Create a new instance of QueryClient.
import React from 'react';
import { AppProps } from 'next/app';

function MyApp({ Component, pageProps }: AppProps) {
  return (
    <QueryClientProvider client={queryClient}>
      <Component {...pageProps} />

export default MyApp;
Wrap your Next.js App component with QueryClientProvider and pass the queryClient instance to it. This allows React Query to be used anywhere in your app.