Multiple Queries

[aubreyzulu]

How do I run multiple queries at once using useQuery hooks....? i have 3 requests, I want to run them at once

[wolverineks]

could you be more specific? or perhaps provide an example of what you have so far?

[Johnrae]

You can just call multiple hooks and namespace the output

const { 
  data: cats,
  isLoading: loadingCats,
} = useQuery('cats', getCats)

const { 
  data: dogs,
  isLoading: loadingDogs,  
} = useQuery('dogs', getDogs)

const { 
  data: birds,
  isLoading: loadingBirds, 
 = useQuery('birds', getBirds)

This has worked pretty well for me in a few projects so far. It feels straigtforward and maintainable.
And if you want, you can just combine your loading states into a single variable.

const isLoading = loadingCats && loadingDogs && loadingBirds

if (isLoading) return <LoadingComponent />

Hope this helps!

[Johnrae]

If you want to get real fancy, you can also wrap your queries with Promise.all, I put together a codesandbox example.
https://codesandbox.io/s/batched-usequery-c170v?file=/src/App.js

[chrisl8888]

Would you still take the same approach now for all these queries?

[sergiodxa]

Wrapping everything in a Promise.all would mean every time you refetch the query you will do three requests, if you have three useQuery you can refetch them individually.

[TkDodo]

v3 has a useQueries hook: https://react-query-beta.tanstack.com/guides/migrating-to-react-query-3#usequeries

[TkDodo]

it's in beta, so if you help beta-testing it, it will be ready faster :)

[albertdugba]

Can you provide a practical example please. I have checked the docs but still confused as it doesn't work for me

[TkDodo]

if you provide a codesandbox example showing what is not working, I'm happy to take a look.

[albertdugba]

Hello @TkDodo please here is a link to a sandbox that I have created. Thank you.
https://codesandbox.io/s/dynamic-parallel-queries-with-usequeries-l1ug3?file=/src/App.js

[TkDodo]

so the error I am getting is: Cannot read property 'map' of undefined

because users is undefined. You define App like this:

export default function App({ users }) {

so it expects users as prop, but you call it like this:

<App />

this has nothing to do with react-query, just with React and props...

if I add some users its all good:

<App users={[{ id: 1 }, { id: 5 }]} />

[Npervic]

Is there a way to do this dynamically? (non version 3).

I have an array of items that should be used to make calls by their id.

[Npervic]

All in the same component they should share a loader

[TkDodo]

Only way of doing it that I know is to map over your array of items and create a component instance for each item, and that component then does the useQuery.

If you want one loading state, I think you have to make one useQuery that gets all the ids and then the fetch function needs to fire off all requests and wrapping them in Promise.allsettled, but then all the data lives together in one cache entry and you cannot update only one of them.