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

rival-black

9/26/2024

Unsure why this is constantly refetching

Okay, I think I fundamentally misunderstand how the cache works in React query. I have a table, one of my columns in the table renders a component which fetches some data. I am trying to get it to stop refetching whenver the table changes ```ts const QueryCell = ({ result, id }: QueryCellProps) => { const queryClient = useQueryClient();...

wise-white

9/25/2024

How to switch between two queries based on condition (type-safe)

I have two queries, foo and bar, which are used separately in some React Components. I have a component that needs to use either foo or bar depending on some dynamic condition. When the condition changes, the old value should be kept until the new data is loaded (e.g. switching from foo to bar should still show foo until bar is ready). The foo query returns { value: string } and the bar query returns { value: string; otherProp: string }....

unwilling-turquoise

9/25/2024

Handling Server Side Validation Requests for Username

I am using a svelte query, I have a mutation that calls the backend to check if the username is available debounced on every key stroke. But the responses from the server come out of order. This causes the responses to not reflect the current value. What is the standard approach for this?

sensitive-blue

9/25/2024

Prefetch mutation

slightly unusual question but can you prefetch a mutation? I have a route that I wasn't really sure which http method would be appropriate, it sends a verification email if one hasn't been sent and returns metadata about the verification email (how many seconds till another can be sent, etc). Since this route has a side effect, I have it as a POST I want this metadata available on page load so I can show a timer, and I also want to ensure this email is always sent when the page loads. If there's a better approach to this, feel free to share...

generous-apricot

9/24/2024

Should gcTime refer to the cached entries, or the cache itself

For some reason I was under the impression that gcTime referred to the time an entire query cache attached to a useQuery hook would be considered stale. But it seems like it's applied to each individual cache entry. So doing useQuery({ queryKey: ["foo", x], gcTime: 0...

deep-jade

9/24/2024

React Query w/ AG Grid

I have successfully implemented React Query with AG Grid and for the most part it works as expected. However, with filters it is behaving unpredictably. My main question: is if anyone here has 1) implemented the two together and 2) worked through more complex filtering issues? The more difficult part of this is that I am actually getting data back from filtered queries and it is structured correctly. ...

unwilling-turquoise

9/24/2024

Enabled property.

Hey there 🙂 I was wondering if it would make sense to expose the enabled property of a query, use-case: I have a query that is consumed in 5 places. When the the query is disabled, I want to display a certain UI for those places. ...

absent-sapphire

9/24/2024

Losing observers on hot reload

Hi, been using RQ on numerous projects over the years and love it. However I'm currently losing my mind looking at something that doesn't seem too complex and yet its not acting how I'm expecting. Am using RQ to store a JWT token that needs refreshing periodically (using refetchInterval). If the token is not present then I clear the rest of the session and show a login screen. This all works fine in production. Whilst devving though if I make any code change that triggers a hot reload. The devtools still show that data is present. (It even continues to refetch the token in the background) however the observer count drops to 0 and I can't quite understand why....

other-emerald

9/24/2024

React Query refetching on each refresh for globally avaliable component even after persisting

Hi, I'm encountering an issue with React Query's persistence in my Next.js website. The data is being correctly persisted in localStorage, and when I use useQuery on a specific page or route, it hydrates properly from the persisted data. However, when I use useQuery in a globally available component, like my Cart component (which is part of the navbar and included in the layout, making it accessible across all pages), the query doesn't seem to hydrate from the persisted data. Instead, it makes a fresh request to the endpoint on every refresh. The query behaves as expected when used in pages but not within this globally available component. I’ve also recently transitioned from Redux Toolkit to React Query, so there's some commented-out Redux code. Here's how I'm using useQuery in the Cart component. Any help or insights would be greatly appreciated!...

other-emerald

9/23/2024

Delay isPending render

Typical code:

if(isPending) return (<LoadingSpinner />

if(isPending) return (<LoadingSpinner />

...

genetic-orange

9/22/2024

How to trigger a function when a query is disabled?

I have a query that gets disabled once a certain condition is met (via setting the refetchInterval to false). I also want to execute a function once the query is disabled. How can I do it?

adverse-sapphire

9/20/2024

Measuring the total time of all queries

I'm looking to profile an app that uses react query. I want to send a report to our server whenever the app is closed, which will record the time the app was open and the time that was taken waiting for requests to finish. Is there an easy way of going about this with react query? Note that if requests run concurrently I do not want the fetch times to be added up Thanks...

correct-apricot

9/19/2024

state management

Hi, I have a question about getQueryState Here is my query, its on query.tsx const itemsQuery = useQuery({ queryKey: ["getAllEvents"],...

national-gold

9/19/2024

How to solve No overload matches this call.

I am getting an error when defining my query. Here is the link to the playground https://www.typescriptlang.org/play/?#code/JYWwDg9gTgLgBAbzgRQK4FMoE8BiqB2AxjMBPgMJkzoAeMANHKgM7pqZZwC+cAZlBBBwARAAEYAQ3zNJhANYB6KOgnEAtAEcM2YQChdMLGHRwc0EDmAAbalGYBlQgAt0ICXAC8iXXF9wZqAAm6PgwAJKBAPwAXP4wUMD4AOZwAD5M+MG8ieiBANw+foRWEszMETFxCclpGVk5+YW+MsoSIBWxLYkp6QT1+LkFfnC2IJVdNb2Z6NkDjcMyErAAIhLUlavUtX0zDUN+IYGb6BtrJlP9g7pcuoRkMnzmawAKEPLoMACyZOi45pY2TDMTxwAAUvH+1lszFiZigFihQMcLjcAEpPAA+bx+ZQwVBQfDY4ZwAB0ZIh8IB...

afraid-scarlet

9/19/2024

RQ Mutations and Query loading sync

Hi, i'm having the following case and i don't know how to solve it right with RQ. I have a Query that include a key (example basket), and also Y posible Mutations that include the same basket key. Then i have a button, that it should show a loading spinner whatever any of the Queries and Mutations that include the basket key....

afraid-scarlet

9/19/2024

React Query vs "use-reducer-async" library

Hi, guys, i'm trying to do some comparasions to find the best way to handle Server State on our project. We're a e-commerce company that we're migrating to a new stack: From Django Template + React -> Next.js App Router...

adverse-sapphire

9/18/2024

How to properly type data in useMutation?

Hello everyone! I am using Tanstack React Query v4.36.1. Please help me to type this correctly? I don't understand why it's not working! I'm using type AxiosResponse<User> and I can see that the correct data is being returned. But it still results in the following error: ```javascript ...

ambitious-aqua

9/18/2024

Pagination with only one query key

I actually go through the docs regarding react query pagination. But somehow, I have a requirement to implement one only query key. My current implementation was to through queryClient.setQueryData() just to override the cache. Appreciate any advise regarding this one. Thank you very much....

flat-fuchsia

9/18/2024

Updating react query cache frequently without spamming my backend

Hello, I'm working on an app that requires to consume a single cache entry from different components at the same time. This entry is initially populated from a query (useGraph) and then is updated when an specific mutation is used (useUpdateNode). Because of a new feature I'm building I need to frequently update the useGraph query cache optimistically (useUpdateNode mutation is called when a text input onChange event is triggered), and it must be reflected instantly in the other components that consume the query. What I'm looking for is a way to debounce the execution of the fetch function, without debouncing the execution of the mutation itself as it would also debounce the optimistic update....

absent-sapphire

9/18/2024

l Query Revalidation Completes After Mutation

Hey! I've globally set up my MutationCache like this: ```ts mutationCache: new MutationCache({ onSuccess: (data) => {...

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