query icon indicating copy to clipboard operation
query copied to clipboard

Type checking `select` works differently on `useQueries` compared to `useQuery`

Open jtannas opened this issue 2 years ago • 13 comments

Describe the bug

When using useQuery, TS correctly infers the argument type of the select query option to be the return type of the queryFn data. Applying the same settings to useQueries it loses that link and changes it to any. The linked TS sandbox shows the issue better than I can explain it though.

Your minimal, reproducible example

https://www.typescriptlang.org/play?#code/JYWwDg9gTgLgBAbzgVwM4FMCKz1WO1AGhQ21wE84BfOAMyghDgCIABGAQwDtVOBjANYB6KOg58YAWgCOOKOWYAoRXwg94IcgBEOnOAF44AbQCMxAEzEAzMQAsxAKzEAbAF1lKtbziay8gyRYcuQAFAiKcHCyFADS6OQAXMYA5OgAbuhcya6EEVHBAGJcSSEAlAYAfHAACgwgwBgAdKKoEAA2GSGaOpyluZEYbegSJRxQUOX6VWNQjbTAbTC4IcCVcKsApHDmBvqGAAx9ilSlyqrqPuR++KgBaEG4N2HReARJRnnhkZEv5HGJKXSmWy-W+vyKJUmVVqjAa6GaBHanW6ug4R2+cEGwxgo3GULgMzmCyWUBWa02212B3R1FyrhOiiAA

Steps to reproduce

See linked Typescript playground to a minimal reproducible example

Expected behavior

I would like the type checking of select on useQueries to work as well as it does on useQuery.

How often does this bug happen?

Every time

Screenshots or Videos

No response

Platform

  • Ubuntu 22.04

Tanstack Query adapter

react-query

TanStack Query version

v5.3.2

TypeScript version

v5.14.0

Additional context

No response

jtannas avatar Dec 19 '23 00:12 jtannas

I think it's a known limitation.

Possible workarounds:

TkDodo avatar Dec 19 '23 15:12 TkDodo

was gonna propose the first workarounds but the second one seems fine too

judicaelandria avatar Dec 19 '23 15:12 judicaelandria

I'll leave this open if someone wants to take a look, but given that we have good workarounds, it's not a priority for me.

TkDodo avatar Dec 19 '23 15:12 TkDodo

Thanks for the tips :) I've been annotating the inputs to work around it but was shying away from queryOptions because these are suspense queries. I tried some workarounds with satisfies UseSuspenseQueryOptions to narrow it down, but no luck there.

Any suggestions there? Maybe a suspenseQueryOptions helper?

jtannas avatar Dec 19 '23 16:12 jtannas

You can pass queryOptions just fine to useSuspenseQueries

playground

TkDodo avatar Dec 19 '23 17:12 TkDodo

yep - was just hoping for something that'd prevent people slipping in placeholderData/enabled since that caught us pretty badly when we started transitioning to suspense

jtannas avatar Dec 19 '23 17:12 jtannas