how to satisfy typescript in query function of react-querie's useQuery hook

Question

I am using useQuery hook from react-query and when I try to access my keys inside of query-function i.e., 2nd argument for useQuery, I am facing an issue with typescript it's complaining on this statement

const postId = queryKey[1].id as any

that

Property 'id' does not exist on type 'string | { id: string | undefined; comments: boolean; }'.
  Property 'id' does not exist on type 'string'.ts(2339)

Everything works fine, I have a defined in postId, the request is sent to the server and I get a response back, problem is with typescript, I even tried to assert the type but doesn't work

  const { data } = useQuery(['post', { id: post?.id, comments: true }], async ({ queryKey }) => {
    const postId = queryKey[1].id as any
     const { data } = await axios.get(`/post/${postId}`, {
       headers: {
         Authorization: `Bearer ${user?.idToken}`,
       },
     })
     return data
  })

Is there any typescript way to solve this ?

TkDodo · Accepted Answer · 2021-08-31 16:35:37Z

2

Types of the queryKey flow through very well in react-query, but you have to give your key an explicit type. If you just do:

['post', { id: post?.id, comments: true }]

Typescript will try to infer the best possible thing, which is an Array of string or object. Every position can have a string or an object as far as Typescript is concerned, so you can’t access the second element like that. You need to give your key a more concrete type. The easiest way is to use const assertions:

['post', { id: post?.id, comments: true }] as const

With that, typescript will infer a readonly Tulpe where the first Element is a string and the second element is an object. With that, your access should work just fine.

answered Aug 31, 2021 at 16:35

TkDodo

30.4k5 gold badges84 silver badges99 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Skay Over a year ago

What if query function is somewhere in the different file? E.g. const { data } = useQuery(['post', { id: post?.id, comments: true }], getPost). How to get proper types inside getPost?

Vikram Deshmukh Over a year ago

@Skay Try explicitly typecasting it inside getPost.

Collectives™ on Stack Overflow

how to satisfy typescript in query function of react-querie's useQuery hook

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related