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} />
    </QueryClientProvider>
  );
}

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.