Dependent Queries

[CHE1RON]

Hey there,
I'm currently looking at dependent queries using react-query. My use case is fetching items, each of which belonging to a group. I want to display the group name along with item data, so I would want to fetch both in the loader and return them to my component:

const getItemsQuery = queryOptions({
  queryKey: ['items'],
  queryFn: () => fetchAllItems(),
});

const getGroupsByIdQuery = (ids: string[]) => queryOptions({
  queryKey: ['groups', ...ids ],
  queryFn: () => fetchGroupsById(ids),
});

// ...

const route = new Route({
  path: 'items',
  component: Items,
  getParentRoute: () => rootRoute,
  // Here I want to load 'getItemsQuery' first and then use its 'groupId' values to use with 'getGroupsByIdQuery' .. ?
  loader: async ({ context: { queryClient } }) => queryClient.ensureQueryData(getItemsQuery),
});

// ..
const Items = () => {
  // ..
  const { data: items } = useSuspenseQuery(getItemsQuery);

  // .. 
}

Any pointer is much appreciated! 🙏

// Edit:
Bonus points: Is there an equivalent of queryOptions for useQueries? 🤔

[0xMALVEE]

@CHE1RON were you able to find a solution?

[CHE1RON]

No 😞 Maybe have a look at their Discord 🤔

[0xMALVEE]

I saw there is a method there called loaderDeps maybe we can do the first api call in there and returnt he dependency into the loader method what you think?

[CHE1RON]

loaderDeps are for transforming / passing search params to the loader 🤔

[0xMALVEE]

ahh I see, someone on discord told to await the first query and promise.all all other dependencies

  const items = await queryClient.ensureQueryData(getItemsQuery)
  const promises = []

items.forEach(item => {
  const opts = getGroupsByIdQuery('somethingdynamic')
  promises.push(queryClient.ensureQueryData(opts))
})

await Promise.all(promises)

discord link: https://discordapp.com/channels/719702312431386674/1256502793636806740/1256512728130916384

[CHE1RON]

That might just work like intended, thanks for looking into this 😉

[CHE1RON]

Please provide the Discord link in your answer 😊