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 generally 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 you may encounter a compiler error. Consider:

1 const resultWithoutUsingMap = useQueries([
2   { queryKey: key1, queryFn: () => 1 },
3   { queryKey: key2, queryFn: () => 'two' },
4 ])

This will result in an error along the lines of Type '() => string' is not assignable to type 'QueryFunction<number>'.

This can be remedied by supplying the union of possible data types as a type parameter; like so:

1 const resultWithoutUsingMap = useQueries<number | string>([
2   { queryKey: key1, queryFn: () => 1 },
3   { queryKey: key2, queryFn: () => 'two' },
4 ])