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
Update refetchInterval
Hello!
App that I'm working on is presumably working in multiple browser tabs/windows, I'm using queries with refetchInterval in few places, and interval is set to 3 minutes. This causes an issue where apps in different tabs seems to be out of sync, eg. first tab is refetching data at 10:00, 10:03, and so on, second tab is refetching data at 10:01, 10:04 and so on.
Is it possible to define refetchInterval as function, and provide custom logic which would allow to calculate different interval till first refetch, and after first refetch, upadte given interval, so all windows/tabs would trigger refetch at same time?
...
revalidateOnWindowFocus question
Guys, this may be a dumb question, but there is a way of "disable" the revalidateOnWindowFocus when i click a button that opens a modal? Or still revalidate the data but still open the modal?
Today:
1- click outside the window
2- click in the button but the data is revalidated, doesn't open the modal...
refetchIntervalInBackground
I have refetchIntervalInBackground set to false, but I'm trying to figure out what "background" actually means? Does it mean "not focused"?
I have the following code:
```...
Avoiding useEffect when data changes
How would you handle data from the server changing, based upon which local state should change too?
The code below "works" but I would like to avoid useEffect, since I feel like it isn't really the right tool for what I want.
So what is the general pattern for how to make changes in server side data affect client side state?
```ts
const useMyCustomHook = (txId: string) => {...
Advice needed: is it still necessary to have service worker and IndexDB if we are using React Query?
What is the best practice in this case? And is there any example code base I can refer to? thanks!
Difference between `queryClient.clear()` and `queryClient.resetQueries()`?
Hey! I'm trying to understand what
queryClient.clear does, which is not very clear at all based on https://tanstack.com/query/v4/docs/react/reference/QueryClient.
The basic use case is:
* User signs out of a mobile app
* Reset all queries, so that data is refetched as an unauthenticated user...Set query data for query with nested array query key
I have a query with
queryKey: ['foo', ['bar']] which I want to update the query data for.
When I do
queryClient.setQueriesData(['foo'], ...)
...set default `exact` option
Hey!
for most of my use-cases, I wanna do
...
refetchQueries({ queryKey: [ /* ... */ ], exact: true });
refetchQueries({ queryKey: [ /* ... */ ], exact: true });
Invalidating dependent queries?
I've just started tinkering with Tanstack Query in React this week, and it's been an absolute joy to use. I'm building a simple weather app, and I want to give the user the opportunity to refetch data without refreshing the page. Obviously, I can use
queryClient.invalidateQueries() for that, but I can't wrap my head around dealing with the dependent query I have.
I am getting the user's current location with the Geolocation API in a useGeolocationQuery, which is a variable in the dependent useForecastQuery.
When the user presses the refresh button, it should first retry the geolocation query. If this has changed, it will obviously fetch the new forecast. However, if it has not changed, it should still get the latest forecast. The easy solution would be to refetch both queries immediately, but I'm dealing with usage limits so I would really like to avoid fetching the latest forecast for an old location (because the refetches would be parallel)....Invalidate query after mutation
Hi, I'm cracking my head to find why some of my invalidations triggers the same data as before the mutation. I'm glad with all the help some of you can give me. This is my component List:
NOTE: if i trigger another invalidateQueries after the one imma bout to show, it only run the second one correctly, no matter if it is the same query or other one.
```ts...
Recommended pattern to compare and select server/local state?
I am building a document editing app where each document is represented as a JSON object with properties including
updatedAt. Currently, I have a simple queryFn that just connects to the DB to get the server version and sets that as the query data. Is there a recommended way to compare this version to the local version (for example, an optimistic update pre-mutation success) and keep whichever is more recent? I do not want an automatic refresh to override local content if the local content is more recent.
I want to avoid this:
* User makes edit to form, triggering an optimistic update and a mutation...Queries become inactive and disappear from devtools
Occasionally, my query will move to the "inactive" section of the devtools and become unresponsive or disappear from the devtools entirely. How can I avoid this? I am building a document editor and using React Query to periodically refetch new versions and mutate to persist changes, so it is important that the query is always active while the user is on the page.
Next 13.4.6, Tanstack Query 4.29.14...
Missing queryFn error
Hi, quick question here. We are using a lot of queryDefaults to handle our queries. Sometimes, while developing or in test, in case of incomplete queryKey, we get a ‘missing QueryFn’ error. Right now we use v4. Is there a plan to add more context (queryKey?) to the error? Is it already fixed in v5?
Thanks....
change default refetchType
when doing
invalidateQueries, one can change the refetchType.
If i always want to do refetchType: "all", is there a way to set it to be the default?...Sharing mutation results across multiple components
Hello everyone! I've been using react-query in my project and I have a question regarding sharing mutation results across multiple components.
I have a custom hook that runs a mutation called linkAccount. This mutation will return an address. I would like to share this address across multiple places in my application. Right now, every place I use the address seems to get their own version of it, and it stays undefined everywhere except for the place where I called the mutation from.
Here's a simplified version of my hook:...
Persist wiped every other refresh. Meta not being loaded/persisted?
Hello,
I'm noticing a weird behavior where:
1. I open the page, a network request is made, the response is cached
2. I refresh the page, the cached data is loaded. However the persist cache gets wiped because meta is undefined...
dev tool not showing in nextjs deployment
i followed how it's done here https://tanstack.com/query/v4/docs/react/devtools
Limit number of concurrent queries?
I have a handful of components that all handle their own internal state and all hadnle their own instance of useQuery. However, there can be LOTS of these queries, and I'd rather not flood my api with 20 concurrnet requests and instead hae it limit the loads to 5 or so at a time, allow those to finish before calling the next 5. Anyone have any idea how to accomplish this?
What makes a query "active"
Couldn't find anywhere in the docs what make a query count as "active" or "live"
Keep data from last query is the next query fails
How can i make the "data" to be the last fetched items from the query in case my current query fails? I think the default situation is it returning the initialData.
