websites/apps/staking/providers/query-provider.tsx

'use client';

import { createQueryClient } from '@/lib/query';
import { type QueryClient, QueryClientProvider, isServer } from '@tanstack/react-query';
import type { ReactNode } from 'react';

let browserQueryClient: QueryClient | undefined;

function getQueryClient() {
  if (isServer) {
    return createQueryClient();
  }
  /** Browser: make a new query client if we don't already have one. This is very important, so we
   *  don't re-make a new client if React suspends during the initial render. This may not be
   *  needed if we have a suspense boundary BELOW the creation of the query client
   */
  if (!browserQueryClient) browserQueryClient = createQueryClient();
  return browserQueryClient;
}

export default function QueryProvider({ children }: { children: ReactNode }) {
  /** NOTE: Avoid useState when initializing the query client if you don't have a suspense boundary
   *  between this and the code that may suspend because React will throw away the client on the
   *  initial render if it suspends and there is no boundary
   */
  const queryClient = getQueryClient();

  return <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>;
}