fix(examples): fix Missing queryFn error in nextjs-app-router example (React Example: Nextjs App Prefetching) #9076
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What this PR does
This PR fixes a hydration error that occurs in the
examples/nextjs-app-prefetching
example, specifically in the React Example: Nextjs App Prefetching documentation.Changes made:
await
beforequeryClient.prefetchQuery
on the server to ensure data fetching completes beforedehydrate(queryClient)
.Why
While visiting the TanStack Query documentation example,
I encountered the following error:
This happened because:
prefetchQuery
was not awaited on the server, sodehydrate(queryClient)
serialized a query still in "pending" state.queryKey
andstate
are serialized.The
queryFn
is never serialized, because JavaScript functions cannot be transferred via JSON.useSuspenseQuery
, the QueryClient had thequeryKey
but no associatedqueryFn
, causing aMissing queryFn
error.This PR ensures that:
QueryClient
instance is used consistently across server and client.Testing
examples/nextjs-app-router
locally.Notes
useSuspenseQuery
and Next.js App Router together.queryKey
andstate
are serialized during dehydration.Thank you for maintaining such a great project! 🚀
Happy to adjust anything based on reviewer feedback.