(v4.22.0) How to use signal with useQueries? (signal is of type any)

[bennettdams]

Is there a way to integrate signal with useQueries?

CodeSandbox: https://codesandbox.io/s/hungry-rui-utc9ms?file=/src/App.tsx

It is very easy to use for useQuery:

useQuery({
  queryKey: ["foo", todoId],
  queryFn: async ({ signal }) => await fetchTodo(todoId, signal)
});

..but useQueries does not provide a signal for the queryFn, or at least it is of type any:

useQueries({
  queries: ["bar"].map((todoId) => ({
    queryKey: ["foo", todoId],
    // ❌ `signal` is of type `any` here
    queryFn: async ({ signal }) => await fetchTodo(todoId, signal)
  }))
});

Am I using it wrong or is this a bug in the types?

[TkDodo]

good question. seems to be a shortcoming of the useQueries types. @artysidorenko might be able to help here :)

[artysidorenko]

Hi @bennettdams, afraid this is indeed a bug in the types.

Short term

I've added a workaround example to your sandbox: res5 and res6 - https://codesandbox.io/s/lingering-firefly-mb8wgm?file=/src/App.tsx

res5 (copied below) => you can get the types to work by providing the signal type explicitly.

  // ✅ useQueries with signal explicitly typed
  const res5 = useQueries({
    queries: ["bar"].map((todoId) => ({
      queryKey: ["foo", todoId],
      queryFn: async ({ signal }: { signal?: AbortSignal }) =>
        await fetchTodo(todoId, signal)
    }))
  });

res6 => you still get type checking, in the sense that if you give your signal the wrong type e.g. { signal?: string }, it will complain as expected.

Medium term

There's some work happening on the TS side that might unblock this so we can fix the bug (related to discussion here), but in the meantime the above should work for you / continue to be valid even after the fix.

[bennettdams]

Thanks!

I'm not a fan of overwriting any with explicit types I don't control, so I just used the query context to overwrite it for now:

type Signal = QueryFunctionContext["signal"]
...
queryFn: async ({ signal }: { signal: Signal  }) =>