The object passed to the queryFn should be typed as QueryFunctionContext when using useQueries

[troywoy]

Describe the bug

The context isn't typed as QueryFunctionContext in a useQueries queryFn.

Your minimal, reproducible example

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1WO1OAXzgDMoIQ4ByAARgEMA7VRgYwGsB6KdBtmAFoAjjigBPagCgppZEwHAITOAEEwYABQBKRFLhw2y1mXQw2AC1UATa71SEAvHE2pgAcyYMANgC41AEbQMADKHl7e2v6seEzucI4AfHoGBrwwyFAq1AAyzOhwAIzUANz6xGXlRizwaOiqsMCsTi66SSmp6Zkqddi4+KiaCOWpcKL9BL4jo3AA2tMzHYuj4xIA0uji-rPUDLb2qNQAugA0C8ur4gBiTP6aAgAebcmkZpY2dgSDjwB0bp4+bRnZapIjnAxHaZEbTlMFgoA

Steps to reproduce

1. Open typescript playground
2. Notice ctx has type any

Expected behavior

As a user, I expect context to be of type QueryFunctionContext.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

• OS: Windows
• Browser: Chrome

Tanstack Query adapter

react-query

TanStack Query version

v5.17.1

TypeScript version

v5.3.3

Additional context

No response

[TkDodo]

@artysidorenko can you take a look here maybe?

[romanslonov]

Run into same issue with passed object in refetchInterval in useQueries.

Temporary solution:

useQueries({
  queries: [...tasks.value].map((task) => ({
    queryKey: backupQueries.checkTask(task.id),
    queryFn: () => getBackup(task.id),
    // query is any type so type by yourself
    refetchInterval: (query: Query<{ backup: Backup }>) => {
      if (query.state.data?.backup.task === null) {
        // ...

        return false;
      }
      return 5000;
    },
  })),
});

"@tanstack/vue-query": "^5.20.2"

[artysidorenko]

Hey folks - I'm afraid this is the same class of issues to do with current Typescript limitations in typing callback params when part of a variadic tuple.

There's some open Typescript PRs I'm keeping an eye on that might make this possible in the future.. but romanslonov's workaround is your best bet for the time being i.e. something like this.

closely related: #5342 (also impacting the queryFn callback) and #3994 (onSuccess + select callbacks)

related Typescript issue: microsoft/TypeScript#52047