Infer query options for useQueries when using array function (map) as input

[bennettdams]

Is there a good way to utilize type-safe query options when using an array as input for useQueries?

Here's a basic way to use useQueries:

  const result1 = useQueries(
    userIds.map((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: 123
      };
    })
  );

In this case, refetchInterval is not typed correctly. That's because TypeScript's map function does not infer the types correctly.

You can circumvent that by giving map a generic for your query options:

  const result2 = useQueries(
    userIds.map<UseQueryOptions<QueryData>>((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: 123
      };
    })
  );

Using the generic, the options are typed correctly.

I created a small CodeSandbox that shows this behavior. I deliberately left refetchInterval empty, so you can see the missing/given type when hovering:

https://codesandbox.io/s/priceless-matsumoto-0yiwc0?file=/src/App.tsx

Result 1 (without generic, missing type for options):

Result 2 (with generic, correct type for options):

---

The example for dynamic parallel queries via useQueries in the docs uses map, so I was wondering if we should recommend given it the correct type via the generic?

...or maybe useQueries types can be optimized? Here's a third example which could be the optimal solution. It just takes a generic for the query data as a generic for useQueries. But as you can see in the CodeSandbox, this does also not work right now (query options are not typed correctly).

  const result3 = useQueries<QueryData[]>(
    userIds.map((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: 123
      };
    })
  );

[TkDodo]

despite the codesandbox, I'm not quite sure what the problem is. refetchInterval can be a number, so refetchInterval: 123 is correct, and you'll get no type error here. If I do:

  const result1 = useQueries(
    userIds.map((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: "f"
      };
    })
  );

now that type errors with:

Type 'string' is not assignable to type 'number | false | ((data: unknown, query: Query<unknown, unknown, unknown, QueryKey>) => number | false) | undefined'.ts(2345)

which also looks correct. Just because you hover something and it shows any doesn't mean there is an issue with the types. Please always run tsc to see if there are actual errors, or just something not ideal with autocompletion in the IDE.

[bennettdams]

Oh thanks, didn't think about that.

[bennettdams]

I now realized that I was confused by something else: When specifying options for useQueries, using number for refetchInterval works great for inferring, but using false raises a type error:

https://codesandbox.io/s/eloquent-wing-8m0qiq?file=/src/App.tsx:341-566

• React Query v3.34.16
• TypeScript v4.4.2

  // Variant 1: `refetchInterval: 123`
  // no errors
  const resultTypeOk = useQueries(
    userIds.map((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        // `number`
        refetchInterval: 123
      };
    })
  );

  // Variant 2: `refetchInterval: false`
  // type error
  const resultTypeError = useQueries(
    userIds.map((userId) => {
      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: false
      };
    })
  );

Variant 2 says:

...
Type 'boolean' is not assignable to type 'number | false | ((data: unknown, query: Query<unknown, unknown, unknown, QueryKey>) => number | false) | undefined'.ts(2345)

Is this related? Should I create an issue for that?

---

Update:
I circumvented this problem by using as const for the returned object, as this will restrict the type of refetchInterval from boolean to false, which is one of the expected types of a query option:

      return {
        queryKey: ["user", userId],
        queryFn: () => queryFn(userId),
        refetchInterval: false
      } as const;

Still not sure if this intended to be happening though.

[TkDodo]

yeah I think its just unfortunate that typescript infers the type boolean when you write false on an object:

const obj = {
    refetchInterval: false
}

type X = typeof obj

the type X will be { refetchInterval: boolean }. playground.

boolean is not allowed because true doesn't make any sense. what you can also do is write refetchInterval: 0 or refetchInterval: undefined to turn it off, or leave it out because no interval is the default. refetchInterval: () => false seems to also work better. as const works because TS will infer the most narrow type possible.

[bennettdams]

Thanks!

[reuelsilva]

Hi bennettdams. Why we use an arrow function in queryFn: () => queryFn(userId) and it doesn't work queryFn: queryFn(userId)?