Type checking select works differently on useQueries compared to useQuery
#6556
Labels
Comments
jtannas
changed the title
select works differently on useQueries compared to useQueriesselect works differently on useQueries compared to useQuery
|
I think it's a known limitation. Possible workarounds:
|
|
was gonna propose the first workarounds but the second one seems fine too |
|
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. |
Thanks for the tips :) Any suggestions there? Maybe a |
|
You can pass |
|
yep - was just hoping for something that'd prevent people slipping in |
1 task
manudeli
added a commit
to toss/suspensive
that referenced
this issue
Apr 4, 2024
fix #767 with @wes5510 @wes5510 I guess that this issue is simmilar issue with TanStack/query#6556 I want to solve this issue like TanStack/query#6556 (comment) (Is this solution same with your opinion?). In my opinion, I think it would be a good idea to add queryOptions  ### select type when I hover on field name  ### select type when I hover on select's arg I expected TData but it's any!!??🥲  I mention you because you suggested this interface(queryOptions) and I've wanted to add it for a while too. I would like to request a review to you with our maintainers. # Solution: new `queryOptions` This new queryOptions will solve select's type issue like TanStack/query#6556 (comment) ## More advantages Tkdodo, The maintainer of TanStack Query explains well why this interface is needed in [video explaining queryOptions in TanStack Query v5](https://youtu.be/bhE3wuB_TuA?feature=shared&t=1697). You can also use queryOptions in TanStack Query v4. 1. QueryKey management becomes easier by processing queryKey and queryFn together. 2. You can remove unnecessary custom query hooks. This is because they can all be used directly in `useQuery`, `useQueries` of TanStack Query v4, and `useSuspenseQuery`, `useSuspenseQueries`, and `SuspenseQuery` of Suspensive React Query. 3. TanStack Query v5 already supports queryOptions. This Suspensive React Query's `queryOptions` will make migration from TanStack Query v4 to TanStack Query v5 easier. ```jsx /queryOptions/ import { queryOptions, useSuspenseQuery, useSuspenseQueries, SuspenseQuery } from '@suspensive/react-query' import { useQuery, useQueries, useQueryClient } from '@tanstack/react-query' const postQueryOptions = (postId) => queryOptions({ queryKey: ['posts', postId] as const, queryFn: ({ queryKey: [, postId], // You can use queryKey. }) => fetch(`https://example.com/posts/${postId}`), }) // No need to create custom query hooks. // You can use queryOptions directly in useQuery, useQueries, useSuspenseQuery, useSuspenseQueries, SuspenseQuery. const post1Query = useQuery(postQueryOptions(1)) const { data: post1 } = useSuspenseQuery({ ...postQueryOptions(1); refetchInterval: 2000, // Extensibility is clearly expressed in usage. }) const [post1Query, post2Query] = useQueries({ queries: [postQueryOptions(1), { ...postQueryOptions(2), refetchInterval: 2000 }], }) const [{ data: post1 }, { data: post2 }] = useSuspenseQueries({ queries: [postQueryOptions(1), { ...postQueryOptions(2), refetchInterval: 2000 }], }) const Example = () => <SuspenseQuery {...postQueryOptions(1)}>{({ data: post1 }) => <>{post1.text}</>}</SuspenseQuery> // You can easily use queryKey and queryFn in queryClient's methods. const queryClient = useQueryClient() queryClient.refetchQueries(postQueryOptions(1)) queryClient.prefetchQuery(postQueryOptions(1)) queryClient.invalidateQueries(postQueryOptions(1)) queryClient.fetchQuery(postQueryOptions(1)) queryClient.resetQueries(postQueryOptions(1)) queryClient.cancelQueries(postQueryOptions(1)) ``` ## PR Checklist - [x] I did below actions if need 1. I read the [Contributing Guide](https://github.com/suspensive/react/blob/main/CONTRIBUTING.md) 2. I added documents and tests. --------- Co-authored-by: Gihyeon Lee <[email protected]> Co-authored-by: Minsoo Kim <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Describe the bug
When using
useQuery, TS correctly infers the argument type of theselectquery option to be the return type of thequeryFndata.Applying the same settings to
useQueriesit loses that link and changes it toany.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
selectonuseQueriesto work as well as it does onuseQuery.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
The text was updated successfully, but these errors were encountered: