-
-
Notifications
You must be signed in to change notification settings - Fork 594
Open
Labels
enhancementNew feature or requestNew feature or requestopenapi-react-queryRelevant to openapi-react-queryRelevant to openapi-react-query
Description
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 usedProposal
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
- I’m willing to open a PR (see CONTRIBUTING.md)
Metadata
Metadata
Assignees
Labels
enhancementNew feature or requestNew feature or requestopenapi-react-queryRelevant to openapi-react-queryRelevant to openapi-react-query