useQueries

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

1 const results = useQueries([
2   { queryKey: ['post', 1], queryFn: fetchPost },
3   { queryKey: ['post', 2], queryFn: fetchPost },
4 ])

Options

The useQueries hook accepts an array with query option objects identical to the useQuery hook.

Returns

The useQueries hook returns an array with all the query results.

Proposed docs to add to the useQueries page:

TypeScript users

If you're using react-query with TypeScript then you'll be able to benefit from type inference:

1 const resultWithAllTheSameTypes = useQueries(
2   [1, 2].map(x => ({ queryKey: `${x}`, queryFn: () => x }))
3 )
4 // resultWithAllTheSameTypes: QueryObserverResult<number, unknown>[]
5 
6 const resultWithDifferentTypes = useQueries(
7   [1, 'two', new Date()].map(x => ({ queryKey: `${x}`, queryFn: () => x }))
8 )
9 // resultWithDifferentTypes: QueryObserverResult<string | number | Date, unknown>[]

In both the examples above, no types were specified and the compiler correctly inferred the types from the array passed to useQueries.

However, if you pass an array literal where different elements have a queryFn with differing return types then the compiler will be able to correctly infer the positional types. Consider:

1 const resultWithoutUsingMap = useQueries([
2   { queryKey: key1, queryFn: () => 1 },
3   { queryKey: key2, queryFn: () => 'two' },
4 ])
5 
6 if (result[0].data) {
7   const isANumber: number = result[0].data
8 }
9 if (result[1].data) {
10   const isAString: string = result[1].data
11 }