setQueryDefaults types

[alissaVrk]

in short, it would be nice if setQueryDefaults could determine the types for the query.

hi, I just started using react query, and trying to find the right way for us to use it - I'd like to use a query both in components/hooks and other functions.
for example, if I have a query ["todos"] that fetches all todos from the server and then another query ["todos", {isDone: true}] which uses the ["todos"] query internally and just filters them then the ["todos"] query will be used in multiple ways.

I'd like all these places to fetch only by name, without specifying queryFn or other configurations.

the first thing I noticed is that to determine types I need to wrap all uses of the query and specify the type.

[alissaVrk]

the best way I've found so far is to use QueryOptions everywhere, and never use query keys directly.

[TkDodo]

sorry, I don't quite understand the question. Do you have an example maybe?

[alissaVrk]

sure

const myTodosOptions = {
  queryFn: fetchMyTodos,
  queryKey: MY_TODOS as unknown[]
}
const {data} = useQuery(myTodosOptions)  //infers types very nicely
const data = await client.fetchQuery(myTodosOptions) //infers types very nicely

but if I do

client.setQueryDefaults(MY_TODOS, {queryFn: fetchMyTodos})

const {data} = useQuery(MY_TODOS)  //I have to specify the type here
const data = await client.fetchQuery(MY_TODOS) //I have to specify the type here

actually I like the solution with QueryOptions more anyway :)

speaking of types.. there is an issue with the QueryKey

const key: QueryKey = ["asdf"];
const otherKey = key.concat([{a: "aaa"}]) //throws

will throw an Argument of type 'Whatever[]' is not assignable to parameter of type 'string'

[TkDodo]

client.setQueryDefaults(MY_TODOS, {queryFn: fetchMyTodos})

const {data} = useQuery(MY_TODOS) //I have to specify the type here
const data = await client.fetchQuery(MY_TODOS) //I have to specify the type here

yes, this is not possible on type level. How should useQuery(MY_TODOS) know on type level that you have set query defaults via client.setQueryDefaults before ? This could happen conditionally, or in a component 5 layers up, or not at all ...

speaking of types.. there is an issue with the QueryKey

the type QueryKey is defined as string | unknown[], so by widening your const key to that type, TS tells you that you cannot call .concat on something that is potentially a `string.

in v4, QueryKeys can only be arrays, so that will go away. But in your case, use const assertions:

const key = ["asdf"] as const;
const otherKey = key.concat([{a: "aaa"}])

or just inference:

const key = ["asdf"];
const otherKey = key.concat([{a: "aaa"}])

[alissaVrk]

thanks,
I understand that there is no way for setQueryDefaults to store the type.
was asking for an alternative solution, but found it :) with the queryOptions

and happy to hear that the QueryKey is changes in v4, I'll create my own type for now :)