T
TanStack•10mo ago
correct-apricot

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>
  );
}
// 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
};
'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
1 Reply
correct-apricot
correct-apricotOP•10mo ago
Involved files hirearchy in a monorepo set-up: 
.
├── apps/
│   └── template-1/
│       └── app/
│           ├── [domain]/             # Dynamic route segment
│           │   └── page.tsx          # Server component entry point (data fetching)
│           ├── layout.tsx           # Root layout (wraps app with Providers)
│           └── providers.tsx        # Client component with QueryClient setup ❗Problematic
│
├── packages/
│   ├── react-core/                   # Shared React logic
│   │   └── src/
│   │       └── api-provider/
│   │           └── api-provider.tsx # Custom context using React Query ❗Depends on QueryClient
│   │
│   └── template-1-kit/              # UI components
│       └── src/
│           ├── template-renderer.tsx # Server component rendering widgets
│           └── widgets/
│               ├── hero-widget.tsx   # Renders SearchFilters client component
│               └── search-filters.tsx # ❗Where error occurs (uses useQuery)
│
└── # Key Relationships:
    # 1. layout.tsx → providers.tsx (QueryClientProvider)
    # 2. page.tsx → TemplateRenderer → HeroWidget → SearchFilters
    # 3. SearchFilters uses useApiQueries → needs both:
    #    - ApiProvider (from providers.tsx)
    #    - QueryClient (from QueryClientProvider)
    #
    # Critical Issue: Client component tree not properly hydrated despite Providers
.
├── apps/
│   └── template-1/
│       └── app/
│           ├── [domain]/             # Dynamic route segment
│           │   └── page.tsx          # Server component entry point (data fetching)
│           ├── layout.tsx           # Root layout (wraps app with Providers)
│           └── providers.tsx        # Client component with QueryClient setup ❗Problematic
│
├── packages/
│   ├── react-core/                   # Shared React logic
│   │   └── src/
│   │       └── api-provider/
│   │           └── api-provider.tsx # Custom context using React Query ❗Depends on QueryClient
│   │
│   └── template-1-kit/              # UI components
│       └── src/
│           ├── template-renderer.tsx # Server component rendering widgets
│           └── widgets/
│               ├── hero-widget.tsx   # Renders SearchFilters client component
│               └── search-filters.tsx # ❗Where error occurs (uses useQuery)
│
└── # Key Relationships:
    # 1. layout.tsx → providers.tsx (QueryClientProvider)
    # 2. page.tsx → TemplateRenderer → HeroWidget → SearchFilters
    # 3. SearchFilters uses useApiQueries → needs both:
    #    - ApiProvider (from providers.tsx)
    #    - QueryClient (from QueryClientProvider)
    #
    # Critical Issue: Client component tree not properly hydrated despite Providers

Did you find this page helpful?