Extending react-query with typescript
Guys I'm just wondering if I can do something like this?
import { useQuery } from "@tanstack/react-query";
export function usePaginatedQuery (other params,...[USE QUERY PARAMS]) {
const query = useQuery([USE QUERY PARAMS])
}
I see myself rewriting the logic for this for the entire app so I'm trying to create a custom hook for it. However, I can't find any reference on the internet on how to properly extend useQuery using typescript. My knowledge in typescript is not that deep yet to figure out this kind of things. I know this is easy enough in plain js but I want the benefits of typescript. Any help would be appreciated, TIA!
7 Replies
This is what I've come up with so far with chatgpt.
I just copied the types from here
Could you just
export const usePaginatedQuery: typeof useQuery => (…?react query has a primitive for pagination,
useInfiniteQuery
return types are inferredSolution
in general you can get very far with just the queryOptions API
i would also be surprised if you need to ever pass the queryClient to a hook manually - there's a
useQueryClient to access it when you need itI also need another props so that is not what Im looking for...
can you jump to a page with that? Im trying to display a table and it has pagination controls. I don't think use useInfiniteQuery would help with that.
will check that out, thank you
yessss, that is exactly what I was looking for! Thank you!