CODEWITHSUNDEEP
react-query
james emanon
james emanon

Reputation: 11807

overcoming these TS errors in useQuery?

So, this is not obvious to me. I am expecting to return this:

data: { totalPrice: string; }

and yet, I'm getting a mismatch between a Promise and QueryFunction....

I'm creating a custom query hook...

  return useQuery<AddSkuSelectedSku['totalPrice'], Error>(
    [queryKey, item],
    async () => {
      const { data } = await product.price({ item })

      return {
        totalPrice: data?.price || ''
      }
    }, mergedOptions
  );

I'm seeing this same type of error in which my QueryFunction is bunking out.

Is it because I am using an 'async function' as the second argument? enter image description here

And because of this, the files I am using are giving TS error as the returned type is off.

Upvotes: 0

Views: 457

Answers (1)

j1mbl3s
j1mbl3s

Reputation: 1028

The queryFn argument expects a return type of a string or a Promise<string>. An async method returns a Promise<T>, so you're almost there.

Instead of returning { totalPrice: data?.price || '' }, you should return data?.price || '', assuming data?.price is a string.

Upvotes: 1

Related Questions