adverse-sapphire

useQueries

Hello, I have 2 queries which i'm trying to run in Parallel. After having read the docs, it mentioned that i need to use useQueries since i'm using react-query with suspense. I'm having a hard time adapting my code to useQueries - the syntax is confusing me quite a bit. In my code, i already have 2 similar custom useQuery wrappers, which look as follows:

export const useTournamentTypes = () =>
    useQuery([queryKeys.tournament_types], getTournamentTypes)

export const useTournamentTypes = () =>
    useQuery([queryKeys.tournament_types], getTournamentTypes)

export const useCheckIns = () =>
    useQuery([queryKeys.checkIns], getCheckIns)

export const useCheckIns = () =>
    useQuery([queryKeys.checkIns], getCheckIns)

How do i pass my 2 custom hooks to useQueries? Thanks in advance~

5 Replies

other-emerald•4y ago

just fyi, useQueries doesn't support suspense. as for syntax, it uses the query object syntax described here: https://tanstack.com/query/v4/docs/reference/useQueries so it's:

useQueries({ queries: [
  { queryKey: [queryKeys.tournament_types], queryFn: getTournamentTypes },
  { queryKey: [queryKeys.checkIns], queryFn: getCheckIns }
] })

useQueries({ queries: [
  { queryKey: [queryKeys.tournament_types], queryFn: getTournamentTypes },
  { queryKey: [queryKeys.checkIns], queryFn: getCheckIns }
] })

useQueries | TanStack Query Docs

The useQueries hook can be used to fetch a variable number of queries: `tsx

adverse-sapphireOP•4y ago

So if i'm using react-query with suspense and i have a bunch of queries on a certain page which i would like to run in parallel. useQueries is not gonna do it for me?

other-emerald•4y ago

There's an open issue

adverse-sapphireOP•4y ago

Thanks for the answer So basically, i cannot really run multiple queries in parallel while using suspense mode and i should disable it instead. I'm not sure if what i'm saying makes sense

other-emerald•4y ago

yes this doesn't work at the moment. You can have two single queries with suspense: true, but unless you prefetch, they will fire in serial: - query 1 sees it needs to fetch and has suspense -> throw Promise, which suspends and unmounts the component. so query2 has no chance to run - once query1 finishes, the component is mounted again, at which time it will see query 2 and also suspends

Gaming

Programming

useQueries

Did you find this page helpful?