search

TanStack / query

🤖 Powerful asynchronous state management, server-state utilities and data fetching for the web. TS/JS, React Query, Solid Query, Svelte Query and Vue Query.
https://tanstack.com/query
MIT License
41.04k stars 2.77k forks source link

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

Open jtannas opened 7 months ago

jtannas commented 7 months ago

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

Tanstack Query adapter

react-query

TanStack Query version

v5.3.2

TypeScript version

v5.14.0

Additional context

No response

TkDodo commented 7 months ago

I think it's a known limitation.

Possible workarounds:

judicaelandria commented 7 months ago

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

TkDodo commented 7 months ago

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.

jtannas commented 7 months ago

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?

TkDodo commented 7 months ago

You can pass queryOptions just fine to useSuspenseQueries

playground

jtannas commented 7 months ago

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