The object passed to the `queryFn` should be typed as `QueryFunctionContext` when using `useQueries`
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
- Open typescript playground
- Notice
ctxhas typeany
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
@artysidorenko can you take a look here maybe?
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"
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: https://github.com/microsoft/TypeScript/issues/52047