setQueryData doesn't give typehints

[88potatoes]

Hi I'd like some help please. My useQuery is typed but my setQueryData typing doesn't work.

So this is my useQuery.

Elsewhere in the application, I setQueryData and it gives type unknown.

If it helps, my queryKeys looks like

I was under the impression that you got type hints if the queryKey was a const.

Any help would be awesome.
Thanks.

[TkDodo]

This can only work if you queryKeys are created with queryOptions, where you also define the same queryFn. The result of the queryFn is what defines what type of data is stored in the cache. Without that, we cannot know that a key called ['posts', 5]will return something of typePost`.

See: https://tkdodo.eu/blog/the-query-options-api

[tamish-max]

The reason setQueryData shows unknown is that the type is not inferred from the tuple key alone. The key only identifies the cache entry; the cached data type comes from the queryFn.

The most ergonomic fix is to define the query with queryOptions(...) and reuse that key:

import { queryOptions } from '@tanstack/react-query'

const postOptions = (id: number) => queryOptions({
  queryKey: ['posts', id] as const,
  queryFn: () => fetchPost(id),
})

Then:

const { data } = useQuery(postOptions(id))

queryClient.setQueryData(postOptions(id).queryKey, (old) => {
  if (!old) return old
  return { ...old, title: 'Updated' }
})

Now old is typed correctly.

If you don't want to refactor yet, the short-term fix is just:

queryClient.setQueryData<Post>(['posts', id], updater)

But queryOptions() is the scalable solution because it keeps the key and its data type connected in one place.