Confusion around Nuxt and suspense.

[genu]

The documentation that goes over SSR & Nuxt found here: https://tanstack.com/query/v4/docs/vue/guides/ssr is a bit confusing.

For the Nuxt 3 example, we see:

export default defineComponent({
  setup() {
    const { data, suspense } = useQuery('test', fetcher)

    onServerPrefetch(async () => {
      await suspense()
    })

    return { data }
  },
})

Its not clear what is happening here, and I see multiple issues:

1. The example later on in the docs (https://tanstack.com/query/v4/docs/vue/examples/vue/nuxt3) doesn't even do this. In the example, all we see is a call to await suspense()
   • Side note: The example itself doesn't even work in the playground either.
2. Based on the guide above, a hydration warning is thrown in the console because data is present on the client, but is undefined on the server.
3. Calling suspense() returns a query result, does something need to happen with that result? Why does it need to return a result --- I thought suspense just executes the query, in this case, on the server. I say this because in the SSR context, data is undefined, but the data that is returned from suspense() is populated.

There should be a working example of how to properly use suspense in Nuxt since the current one is broken, or some more information on how this part is supposed to work -- as it stands, this causes hydration issues:

onServerPrefetch(async () => {
    await suspense()
})

[abrunner94]

I have a similar question as well. Would love to get some thoughts and possible resolutions.