query icon indicating copy to clipboard operation
query copied to clipboard

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

Open troywoy opened this issue 2 years ago • 2 comments

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

troywoy avatar Feb 12 '24 18:02 troywoy

@artysidorenko can you take a look here maybe?

TkDodo avatar Feb 13 '24 11:02 TkDodo

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"

romanslonov avatar Feb 14 '24 06:02 romanslonov

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

artysidorenko avatar Feb 18 '24 23:02 artysidorenko