Error not persisted during hydration

[raggesilver]

Environment

Package: @hebilicious/vue-query-nuxt 0.3.0
Node: v22.12.0

Reproduction

<script setup lang="ts">

const { suspense, data, error, isPending } = useQuery({
  queryKey: ["something"],
  queryFn: () => useRequestFetch()("/respond-with-4xx")
});

if (import.meta.env.SSR) {
  await suspense();
}

// SSR: { error: "Some error message" }
// Client: { error: undefined }
console.log({ error: error.value?.message });
</script>

<template>
  <div>
    <span v-if="isPending">Loading...</span>
    <span v-else-if="error">Error: {{ error.statusMessage ?? error.message }}</span>
    <span v-else>{{ data }}</span>
  </div>
</template>

Describe the bug

When a page is rendered server side and an API call responded with an error (4xx or 5xx) the state is lost during hydration, causing a hydration mismatch error.

Here's a breakdown of the events:

1. server renders component (by awaiting the suspense promise) and renders the error message
2. browser loads html with error message
3. component code is executed client-side
4. instead of keeping the error response, useQuery sets error to null and isPending to true, causing hydration mismatch errors

Additional context

No response

Logs

No response

[n0099]

After #115 and #116 gets merged or using my fork https://www.npmjs.com/package/@n0099/vue-query-nuxt:

1. Set retryOnMount to false in nuxt.config.ts: Respecting staletime for errors TanStack/query#4956 (comment)

   export default defineNuxtConfig({
       vueQuery: {
           queryClientOptions: {
               defaultOptions: {
                   queries: {
                       retryOnMount: false
                   }
               }
           }
       }
   });

2. Create file vue-query.config.ts at project root to set shouldDehydrateQuery:

   export default defineVueQueryPluginHook(() => {
       return {
           dehydrateOptions: {
               shouldDehydrateQuery: () => true
           }
       };
   });

Also see:
TanStack/query#1208
https://tanstack.com/query/v4/docs/framework/react/guides/migrating-to-react-query-3#the-queryoptionsinitialstale-option-has-been-removed
TanStack/query#9190