Proper way to handle multiple suspense functions in Tanstack Vue Query

[hougesen]

I am unsure if this is a Tanstack question or Vue/Nuxt, so forgive me if this is not the right place for my question.

According to the Tanstack Query documentation, a query can be fetched during SSR by calling the suspense function provided by useQuery in the onServerPrefetch hook. Sadly the documentation does not specify the preferred way to call multiple suspense functions in the same component/route.

Assuming our code looks something like this:

import { useQuery } from '@tanstack/vue-query';

const { data: data1, suspense: suspense1 } = useQuery({
  queryKey: ['query1'],
  queryFn: someQueryFn1,
});

const { data: data2, suspense: suspense2 } = useQuery({
  queryKey: ['query2'],
  queryFn: someQueryFn2,
});

We would have a lot of different options, but I am unsure which one to use.

The most obvious option is of course sequentially, but that is pretty easy to rule out as slower than the others.

onServerPrefetch(async () => {
  await suspense1();

  await suspense2();
});

Another option would be multiple onServerPrefetch. I have not tried it, but I would guess it depends on how onServerPrefetch is implemented (calling each onServerPrefetch sequentially or using something like Promie#all), if it is even supported.

onServerPrefetch(suspense1);

onServerPrefetch(suspense2);

The third option would be to use Promise#all. Promise#all rejects if a single of the promises raises an error, which could help to find issues, but it would be pretty annoying if successful requests are thrown away (?).

onServerPrefetch(async () => {
  await Promise.all([suspense1(), suspense2()]);
});

Promise#allSettled seems like the best option since it does not reject if a single promise is unsuccessful, but I am not sure if I am missing something.

onServerPrefetch(async () => {
  await Promise.allSettled([suspense1(), suspense2()]);
});