T
TanStack•6mo ago
xenial-black

queryDefaults typing

Hello, Wanted to know if it is a common way to create queryDefaults and mutationDefaults ? I'm trying to centralize all my request in a folder, and then I have a object containing all my queryKeys to easily call a query or mutation somewhere on my app. My main issue with this is that I don't have the type of the query i'm calling, since it is just a queryKey. Is there a way to infer the type of a query / mutation when you use it ?
2 Replies
xenial-black
xenial-blackOP•6mo ago
Maybe I should export my queryFn / mutationFn and use this instead of setting up defaults ?
wise-white
wise-white•6mo ago
the queryOptions utility lets you create options for a useQuery and other hooks, without actually calling them. This lets you define your queryOptions for each query in your application in a typesafe and re-useable manner. Example: 
const loginOpts = queryOptions({
  queryKey: ["login"],
  queryFn: () => API.login()
})
const loginOpts = queryOptions({
  queryKey: ["login"],
  queryFn: () => API.login()
})
Generally I would recommend defining this as factory function like this: 
export const createLoginOpts = (args: Args) => {
  return queryOptions({
    queryKey: ["login", args],
    queryFn: () => API.login(args)
  })
}
export const createLoginOpts = (args: Args) => {
  return queryOptions({
    queryKey: ["login", args],
    queryFn: () => API.login(args)
  })
}
Then you can either just import each of these in your app, or attach them all to one big queryOptions object that you can throughout your app. In the app for example, you can use these options like follows 
// just the defaults
useQuery(createLoginOpts());

// with extra options
useQuery({
  ...createLoginOpts(),
  retry: false
})
// just the defaults
useQuery(createLoginOpts());

// with extra options
useQuery({
  ...createLoginOpts(),
  retry: false
})
You also get some type magic using queryOptions which will give you type safety for calling functions like queryClient.getQueryData(createLoginOpts().queryKey) where it will be able to work out the type of the data base on the queryKey like magic. Let me know if you have any other questions I could help out with 🙂

Did you find this page helpful?