How to properly type the useQueries hook?

[tomashaddad]

Ultimately this doesn't matter that much to me since I can just write an endpoint for this to use with useQuery, but say I wanted to use useQueries to run a batch of queries on a number array ids. I'm using a map as detailed in the documentation.

Typescript successfully infers the type of this variable based on the return of api.someFunc (a Promise<SomeInterface>):

// test: [UseQueryResult<SomeInterface, unknown>]
let test = useQueries({
  queries: ids.map((id) => {
    return {
      queryKey: ["key", id],
      queryFn: api.someFunc(id),
    };
  }),
});

However, if I explicitly tell useQueries what my type is by calling it as useQueries<SomeInterface[]>, it infers the return type as UseQueryResult<unknown, unknown>[] instead. From this discussion, it seems this is a way to get the correct type with a map:

// test: UseQueryResult<SomeInterface, unknown>[]
let test = useQueries({
  queries: ids.map<UseQueryOptions<SomeInterface>>((id) => {
    return {
      queryKey: ["id", id],
      queryFn: api.someFunc(id),
    };
  }),
});

Even without a map, typing useQueries returns the data as unknown:

// test: UseQueryResult<unknown, unknown>[]
let test = useQueries<SomeInterface[]>({
  queries: [
    {
      queryKey: ["id", ids[0]],
      queryFn: api.someFunc(ids[0]),
    },
  ],
});

I'm not sure if this is an issue or if I'm just using it wrong. I would think this should work similarly to a typed useQuery, which I would write as useQuery<SomeInterface, Error>, which gets you the return type UseQueryResult<SomeInterface, Error>.

[TkDodo]

seems like a bug in the types (they are rather complex)

here is a simple typescript playground showing the issue.

@artysidorenko fyi

[artysidorenko]

Hi @tomashaddad , yes to be honest at the time I hand't yet taken into consideration the need for explicit-typing-with-dynamic-size-arrays, those explicit type params were intended more as an escape hatch in case the automatic inference didn't work.

A. What was built originally, but not a good solution:

If your input queries are a fixed array of known length, it would accept a couple of different options, that both get really ugly really fast (a fixed length 2-dimensional array, or an array of object type-maps... some examples of the former and the latter, just in case you're curious).. these only works for fixed length inputs anyway.

B. Not well-documented, but actually works best:

If you pass UseQueryOptions<SomeInterface>[] as your type param - i.e. the exact type of the queries argument - it will infer the results precisely. Although it's not clearly documented, the types do this by design, so I believe this is the cleanest solution... and it should work with both fixed and variable length inputs. I'm almost tempted to replace all the code logic behind section A, and support only this kind of explicit type param going forward 🤔

type TQueries = UseQueryOptions<SomeInterface>[]

// test: UseQueryResult<SomeInterface, unknown>[]
let test = useQueries<TQueries>({
  queries: [
    {
      queryKey: ["id", ids[0]],
      queryFn: api.someFunc(ids[0]),
    },
  ],
});

Here's @TkDodo 's playground with the working solution added below

[artysidorenko]

forgot to add: the reason it's very difficult to make something simple like useQueries<SomeInterface[]> work, is because it would need to understand that SomeInterface only represents TQueryData, and handle situations where you might also want to provide TError and/or TData