fix(examples/vue/nuxt3): guard hydrate() against a null dehydrated state

[awdr74100]

Summary

packages/query-core's hydrate() changed behavior in 5.102.1 (#11260, "accept partial dehydrated state"): the second parameter went from dehydratedState: unknown to dehydratedState: Partial<DehydratedState>, and the function's internal runtime guard was removed along with it:

 export function hydrate(
   client: QueryClient,
-  dehydratedState: unknown,
+  dehydratedState: Partial<DehydratedState>,
   options?: HydrateOptions,
 ): void {
-  if (typeof dehydratedState !== 'object' || dehydratedState === null) {
-    return
-  }
-
   const mutationCache = client.getMutationCache()
   ...
-  const mutations = (dehydratedState as DehydratedState).mutations || []
+  dehydratedState.mutations?.forEach(...)

This examples/vue/nuxt3 plugin still calls hydrate() unconditionally with a value that's typed (and can genuinely be) DehydratedState | null:

const vueQueryState = useState<DehydratedState | null>('vue-query')
// ...
if (import.meta.client) {
  nuxt.hooks.hook('app:created', () => {
    hydrate(queryClient, vueQueryState.value)
  })
}

vueQueryState.value stays undefined (Nuxt's useState default with no init) whenever the server-side app:rendered hook never ran for the current route — e.g. ssr: false routes, or a purely client-rendered page. Previously hydrate()'s own guard absorbed that case silently. On @tanstack/vue-query ≥ 5.102.1 it now throws:

TypeError: Cannot read properties of undefined (reading 'mutations')

I ran into this while bumping @tanstack/vue-query in a Nuxt 4 project and traced it back to the removed guard — this example (and presumably anyone who copied it, since the example itself is still pinned to ^5.90.2 and hasn't hit this yet) will hit the same crash once bumped past 5.102.1.

What changed

Restores the equivalent guard at the call site, matching what hydrate() used to do internally:

if (import.meta.client && vueQueryState.value) {
  const dehydratedState = vueQueryState.value
  nuxt.hooks.hook('app:created', () => {
    hydrate(queryClient, dehydratedState)
  })
}

(Captured into a local const rather than a non-null assertion, since the truthiness narrowing on vueQueryState.value doesn't survive into the nested closure passed to nuxt.hooks.hook.)

Notes

• Scoped to this one example/file since that's the concrete case I hit; happy to extend to other framework examples using the same hydrate(client, state.value) pattern if that's wanted, just didn't want to guess at conventions across frameworks I haven't verified against.

Summary by CodeRabbit

• Bug Fixes
  • Improved client-side hydration in Nuxt 3 integrations.
  • Prevented hydration attempts when no server-generated query state is available.
  • Ensured the correct dehydrated state is used during app initialization.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro Plus

Run ID: 4c7011bf-9f74-4c18-8f69-6b73ccd62ba7

📥 Commits

Reviewing files that changed from the base of the PR and between 16b6671 and 3607330.

📒 Files selected for processing (1)

• examples/vue/nuxt3/plugins/vue-query.ts

Included review availability: Your plan provides up to 10 included reviews per hour; 9 remain after this review.

---

📝 Walkthrough

Walkthrough

The Nuxt 3 Vue Query plugin now hydrates only when dehydrated state exists. It captures that state during setup and uses the captured value in the app:created hook.

Changes

Nuxt hydration

Layer / File(s)	Summary
Guard and capture hydration state examples/vue/nuxt3/plugins/vue-query.ts	The client-side branch now requires vueQueryState.value. The plugin captures the dehydrated state before registering the app:created hook and passes it to hydrate.

Estimated code review effort: 1 (Trivial) | ~5 minutes

Merge Risk: ⚪ Minimal · up to 36073

The Nuxt example now skips hydration when no server state exists, preventing a null or undefined state crash while preserving hydration when state is present; no actionable merge-blocking risk remains.

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title clearly identifies the Nuxt 3 example fix and the guarded hydrate() call.
Description check	✅ Passed	The description clearly explains the cause, impact, implementation, and scope of the change, but it omits the template checklist and release impact sections.
Docstring Coverage	✅ Passed	Docstring check was indeterminate for this PR — some files could not be analyzed in time. Not blocking.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}