How can I use (Vue Query) useQueries based on async data

[DarynH]

In my Vue code, I have something similar to this:

export const useGetGames = (gameIds: number[]) => {
  return useQueries({
    queries: gameIds.map((id) => {
      return useGetGameQueryOptions(id)
    }),
    combine: (results) => {
      return {
        data: results.map((result) => result.data),
        isLoading: results.some((result) => result.isLoading),
        isError: results.some((result) => result.isError),
        isSuccess: results.every((result) => result.isSuccess),
      }
    },
  })
}

This code works when I pass in hard coded gameIds.

The issue is I need get the gameIds from the backend. I am currently doing this via another useQuery call.

It is similar to this:

const gameIdsQuery = useGetGameIds(clientId) // this will return a list of game Ids which I want to use in useGetGames

This does not seem to work

const gameIdsQuery = useGetGameIds(clientId) 
const gamesQuery = useGetGames(gameIdsQuery.data.value ?? []).

This will call useGetGames with the empty array and not with the actual IDs.

How can I structure this so that it uses the data that was loaded asynchronously?

This is not my actual code, so if there are typos please ignore them.

Thanks in advance.

[DarynH]

I found the relavant docs - https://tanstack.com/query/latest/docs/framework/vue/guides/dependent-queries#usequeries-dependent-query

While I have not tried it, it does look like the answer to my question.

Thanks