Skip to content

Allow excluding fields (like headers) from queryKey generation #2516

@darkmyu

Description

@darkmyu

Description

In Next.js 15 App Router, server components require manually passing headers for authentication, while client components use credentials: 'include'. This causes queryKey mismatch because queryOptions includes headers in the key on server but not on client, breaking prefetched data hydration.

// Server Component (prefetch)
const cookieStore = await cookies();
const cookie = cookieStore.toString();
const options = $api.queryOptions('get', '/users', {
  headers: { cookie }, // Required for server
  params: { query: { page: 1 } }
});
await queryClient.prefetchQuery(options);
// queryKey: ['get', '/users', { headers: {...}, params: {...} }]

// Client Component (hydrate)
const { data } = $api.useQuery('get', '/users', {
  params: { query: { page: 1 } } // No headers - uses credentials: 'include'
});
// queryKey: ['get', '/users', { params: {...} }]
// ❌ Keys don't match - prefetched data not used

Proposal

Is there a way to exclude headers from queryKey generation, or is there another approach to handle this SSR hydration mismatch in Next.js?

Extra

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions