Error not persisted during hydration

[raggesilver]

trafficstars

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