TanStackT
TanStack•12mo ago•
1 reply
primary-violet

Error: No QueryClient set in Next.js App Router despite following Advanced SSR guide.

I'm trying to set up React Query in Next.js app router in my NPM workspace. I'm following the official documentation on how to do so.

Providers Setup

// apps/template-1/app/providers.tsx
"use client";
let browserQueryClient: QueryClient | undefined; // Singleton pattern

function getQueryClient() {
  if (isServer) return new QueryClient();
  if (!browserQueryClient) browserQueryClient = new QueryClient();
  return browserQueryClient;
}

export default function Providers({ children }) {
  const queryClient = getQueryClient(); // <-- Potential issue
  return (
    <QueryClientProvider client={queryClient}>
      <ApiProvider http={http}>{children}</ApiProvider>
    </QueryClientProvider>
  );
}


The problematic component is this one:
'use client'
export const SearchFilters = () => {
  const { locationsQueries } = useApiQueries(); // Custom context
  const { data: cities } = locationsQueries.getCities.useQuery(); // Error here
};


SearchFilters is a child node of a server component page.

Error (happens on server side):

Error: No QueryClient set occurs in SearchFilters despite being wrapped in Providers.

Troubleshooting done:
- multiple react query versions -> they are all the same
- different react versions -> same in every package/app
- adding HydrationBoundary to page.tsx and passing queryClient to it
Was this page helpful?