[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.

[DamianOsipiuk]

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

This is expected as onServerPrefetch is invoked only on server.
If you start the application on one page and then move to another page, it's done on the client side like in an SPA.

In Nuxt 3 you do not need to wrap suspense call in onServerPrefetch as long as you set proper staleTime for the query to prevent it from being re-fetched on the client side.

You could check out this Nuxt 3 example which does not use onServerPrefetch and would potentially work fine in your use-case. (Notice staleTime set in the plugin)

And yes, for Nuxt 3 we could change the docs and remove onServerPrefetch wrapper, adding warning that staleTime has to be high enough to account for the time it takes page to render from the time query was prefetched on the server.