TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

Join

react-query-questions

solid-query-questions

table-questions

virtual-questions

router-questions

react-charts-questions

ranger-questions

vue-query-questions

svelte-query-questions

bling-questions

form-questions

angular-query-questions

start-questions

db-questions

start-showcase

router-showcase

📣-announcements

robust-apricot

2/7/2024

Dependee useQueries only randomly executing, despite successful dependend useQuery result

I have a simple useQuery, which is enabled in my onMounted call: ``` const { isSuccess, isError, data: assetManagerEvents } = useQuery( {...

exotic-emerald

2/6/2024

isPending always false and status always 'idle'

I am using the react-query integration with TRPC and successfully calling mutations. However the isPending never changes to true and status is always "idle". Can anyone spot why? ``` function ProfileImageModal() { const { toast } = useToast()...

flat-fuchsia

2/6/2024

Dynamically modifying queryKeys?

A little context, what I'm doing is writing "controllers" that do some data manipulation and return them as queryOption objects. This way I can make the call on the server and hydrate the client side queryClient. (NextJS pages directory.) I have to call one API to get an array of address books, then run through those address books and get all the addresses in them. And return them categorized into sepearte billing and shipping addresses. /addressbooks -> /addressbooks/{addressBookId}/addresses -> groupBy(addressType) What I would like to do is dynamically push to a queryKey array and make sure that's used so I can easily invalidate edits on individual addresses....

national-gold

2/5/2024

How to handle nested objects without re-render the whole app?

App example: user has columns, columns has todos, each todo has a done checkbox that can be toggled on and off, basic stuff How should I manage the requests to this use-case? One request to fetch all data? or split the data fetch into individual requests for each column? At some point, the entry data will have to be refetched/mutated/optimistic updated, and this will change the entry data reference and trigger a re-render to my whole app....

adverse-sapphire

2/5/2024

query cache performance

is there any significant difference between using const {data} = useSomething(params) or inifite query and useSomething(params)...

rival-black

2/5/2024

structuralSharing=true should return same object on unchanged data even if queryKey changes

I thought structuralSharing=true will always return the same object reference if the server data is unchanged regardless of changes done in the queryKey. Is this a wrong assumption?

optimistic-gold

2/5/2024

Cache Invalidation not working on consecutive updates

``` import { useQuery } from '@tanstack/react-query'; import { QueryKeys } from 'queries/keys'; import { fetcher } from 'utils/fetcher'; ...

subsequent-cyan

2/5/2024

is there a way to call server function using useQuery hook

e.g filename.ts ```ts "use server"...

afraid-scarlet

2/4/2024

Does getQueryData function return a reference to the cached data?

Suppose I have a cached product. I have the following: const product = queryClient(["Product","some_id"]); //Knowing that, the product price is 20 at the beginning. // Some code here product.price = 14;...

other-emerald

2/4/2024

Serialize dates with SSR / react-query

Is there a nice/automatic way to serialize/deserialize dates in react-query when doing SSR hydration? (I'm using next.js). useQuery doesn't seem to have a deserialize fn - so whatever gets put in there will be wrong. react-query in general doesn't seem well designed / thoughtful for SSR. Am I missing something?...

xenial-black

2/4/2024

Strongly typing useQueries

Hi I am trying to use useQueries, and I have doubt with Typescript, I am trying to call multiple fetch functions in useQueries and it returns an array of combined types. I was wondering is there any way to strongly type the array with query v5: in the given code, is there any way to return the types like [string, date, number] considering those functions returns these types correspondingly? ```const { data, isSuccess, isError } = useQueries({...

other-emerald

2/4/2024

queryclient

Not being able to fetch my chats properly using useInfiniteQuery

fair-rose

2/4/2024

multiple filters, infinite scroll and a search input

I need to write a useInfiniteQuery where search filters can be unset, the query key will be just the: [entity], there can be one filter: [entity, filter], or multiple filters selected: [entity, ??], and with an optional search string. All using pagination and infinite scroll. What should I put as my query key for multiple filters or is it better to change the backend query dynamically and keep adding the newer results to the same query cache while storing old results? Can someone show me the best approach to this problem? ...

equal-aqua

2/4/2024

How to trigger query in one component and view it in another?

I have a component that has a dropdown that when summited should trigger a query, I put the query in a custom hook like ```js import { useQuery } from "@tanstack/react-query"; import { PublicUserTypeArray } from "@/types/types";...

ratty-blush

2/2/2024

Bug in Query ESLint exhaustive-deps + question about plugin access

Hello, I've found little bug, which couldn't be reported in Github since there is no public access to package @tanstack/eslint-plugin-query. Could You make it public? Bug is related to access in nested code of queryFn which doesn't trigger exhaustive-deps error. Attached examples of error and proper detection....

genetic-orange

2/1/2024

Typescript and conditional select

Hi, So I want to have a query ```` const useGetItems = (id: string, select?: (data: ViewsType) => void) => {...

other-emerald

2/1/2024

[TS Error] Can't export useQuery result

I'm currently getting the following TS error which I can't really resolve when trying to export a useQuery result:

The inferred type of 'query' cannot be named without a reference to '../../node_modules/@tanstack/vue-query/build/modern/useQuery-CPqkvEsh'. This is likely not portable. A type annotation is necessary.ts(2742)

The inferred type of 'query' cannot be named without a reference to '../../node_modules/@tanstack/vue-query/build/modern/useQuery-CPqkvEsh'. This is likely not portable. A type annotation is necessary.ts(2742)

Code:...

other-emerald

2/1/2024

unresponsive invalidateQuery()

So all my other invalidateQueries() functions run on the rest of my app except this one, so I hacked it a bit to get it to work by setting the "enabled" property. The query runs when I change tabs at the top but not after an image is uploaded "onSettled" to make the new image available in the "Select Images" modal. So I'm basically running it with a "onClick" when I open the "Select Images" modal. If anyone has any ideas let me know 🙂 Could it be that the modal on "Select Images" could be too f...

generous-apricot

2/1/2024

Trouble with navigation after useMutation

Hi, I have a useMutation which gets called on an onSubmit to my login form. I call an endpoint on my server which returns a cookie with JWT token. All of this works correctly, however after I get the cookie i try to navigate to the /dashboard. It seems that if i do this right away the navigation does not work correctly but if i sleep for even a 100 ms it works (I have a before loader on the dashboard page that checks for the cookie being present). I'm guessing the cookies arent being set right away, and that a 100ms delay is enough for it to work but I'm not sure. I would really appreciate any help this is my first time working with TanStack. ``` const mutation = useMutation({...

exotic-emerald

1/31/2024

What is the best way to paginate my queries (limit/offset on db) using tanstack table and query

I have a Node aplication on the back-end doing raw SQL and a React appliction on the front-end using tanstack table and tanstack query. if anyone has some tips or code that would help it would be apreciated

Previous Next

Gaming

Programming

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs

TanStack

TanStack is a community of passionate software engineers striving for high-quality, open-source software for web devs