Skip to content

fix(examples): fix Missing queryFn error in nextjs-app-router example (React Example: Nextjs App Prefetching) #9076

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

Globalkmaria
Copy link

@Globalkmaria Globalkmaria commented Apr 27, 2025

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:

  • Added await before queryClient.prefetchQuery on the server to ensure data fetching completes before dehydrate(queryClient).

Why

While visiting the TanStack Query documentation example,
I encountered the following error:

⨯ Error: Missing queryFn: ‘[“pokemon”]’
at Array.forEach ()
{ digest: ‘1532731130’ }

This happened because:

  • prefetchQuery was not awaited on the server, so dehydrate(queryClient) serialized a query still in "pending" state.
  • In TanStack Query, during dehydration, only queryKey and state are serialized.
    The queryFn is never serialized, because JavaScript functions cannot be transferred via JSON.
  • Therefore, when the client hydrated and used useSuspenseQuery, the QueryClient had the queryKey but no associated queryFn, causing a Missing queryFn error.

This PR ensures that:

  • Prefetching is completed before dehydration.
  • The same QueryClient instance is used consistently across server and client.
  • Hydration succeeds without missing functions.
  • Suspense works properly with server-prefetched queries.

Testing

  • Ran examples/nextjs-app-router locally.
  • Verified:
    • No hydration errors occur after the fix.
    • Immediate rendering with prehydrated data.
    • Correct fallback loading UI when no prefetch exists.
  • No runtime errors or warnings observed.

Notes

  • This fix is isolated to the example app; no core TanStack Query code is changed.
  • Improves the developer onboarding experience by preventing a common hydration pitfall when using useSuspenseQuery and Next.js App Router together.
  • Based on the current React Query v5 behavior where only queryKey and state are serialized during dehydration.

Thank you for maintaining such a great project! 🚀
Happy to adjust anything based on reviewer feedback.

@Globalkmaria
Copy link
Author

Hi team 👋
Encountered this real error when visiting the docs example and fixed it. Happy to adjust anything if needed 🚀

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant