[vue-query] useInfiniteQuery does not fetch data on the server?

[PolinaTcaciuc]

Describe the bug

If I initially navigate to the page that makes the request in onServerPrefetch, the data is successfully fetched on the server and displayed. However, if I enter the site from a different page and then navigate to the page where the request is made in onServerPrefetch using suspense (or fetchNextPage) extracted from useInfiniteQuery, the data is not fetched from the server, and the application crashes due to the inability to iterate over undefined.

Your minimal, reproducible example

https://codesandbox.io/p/devbox/kxns4d?file=%2Fpages%2Fbase.vue%3A39%2C1

Steps to reproduce

1. Open the reproduction in the browser.
2. Go to the homepage (Index page).
3. Refresh the page.
4. Click on the link (Go to Base page).
5. Check the console; there will be an error due to the data not being fetched on the server.

Expected behavior

When navigating from a regular page to the one where suspense or fetchNextPage is called in onServerPrefetch, the data is fetched on the server and displayed successfully, just like it happens now if you initially go to the page where the data is being fetched

How often does this bug happen?

Every time

Screenshots or Videos

Platform

-OS Windows

• Browser Chrome

Tanstack Query adapter

None

TanStack Query version

5.59.4

TypeScript version

No response

Additional context

Is it possible to perform a server request using useInfiniteQuery? If so, what am I doing wrong? How can I fetch the first page of data using useInfiniteQuery on the server? Thank you!

[PolinaTcaciuc]

So, it seems that I’ve found an answer that I couldn’t find in the official documentation. In this case, you can call suspense extracted from useInfiniteQuery within useAsyncData, like this:

<script setup lang="ts">
useAsyncData(async () => {
  await suspense();
  return true;
});
</script>

Or use the official Nuxt 3 hook - CallOnce:

<script setup lang="ts">
await callOnce(async () => {
  await suspense();
});
</script>

Unfortunately, when using onServerPrefetch, the pages won’t be fetched. I would like to understand why this doesn’t work and whether the documentation, specifically the "SSR & Nuxt" section, should be updated to include this information.