Is there any way to declare augmented type for queryClient.setQueryData?

[yaindrop]

Hi everyone. This's my first day working with TanStack Query. Just wondering how much it's type system can provide. I'm thinking about this very simple example:

export async function me(): Promise<{ user: User }> {
  return await rest.fetch(AuthContracts.Me, {})
}

export async function login(email: string, password: string): Promise<{ user: User }> {
  return await rest.fetch(AuthContracts.Login, { body: { email, password } })
}

export function useMe() {
  return useQuery({
    queryKey: ['auth', 'me'],
    queryFn: me,
  })
}

export function useLogin() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: ({ email, password }: { email: string; password: string }) => login(email, password),
    onSuccess: async data => {
      queryClient.setQueryData(['auth', 'me'], data)
    },
  })
}

I can see that useMe has its return value correctly inferred, but in queryClient.setQueryData(['auth', 'me'], data.user) there's no typed inferred for the 2nd argument, which can lead to mistakes. I know that I can do setQueryData<{ user: User }>(...) but that's still a manual type assertion.

I think for situations like this people would usually do type augmentation (like what fastify encourages us), but I'm not sure whether TanStack Query also works this way. I've seen some type augmentation examples here but it seems only providing limited features?

Also, correct me if I'm wrong, it's a common practice to use queryClient.setQueryData for cases like this right? If so, I think we do need stricter typings here.

[yaindrop]

Just came across this thread, so it seems that currently the best we can do is

const meOptions = queryOptions({
  queryKey: ['auth', 'me'],
  queryFn: me,
})

export function useMe() {
  return useQuery(meOptions)
}

export function useLogin() {
  const queryClient = useQueryClient()

  return useMutation({
    mutationFn: ({ email, password }: { email: string; password: string }) => login(email, password),
    onSuccess: async data => {
      queryClient.setQueryData(meOptions.queryKey, data)
    },
  })
}

right? It looks good to me, but requires a bit of research to know...

[TkDodo]

queryOptions is indeed the way to go:

• https://tkdodo.eu/blog/the-query-options-api
• https://tanstack.com/query/v5/docs/framework/react/typescript#typing-query-options