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
Query does not retry on fail
I have the following setup and query. I am trying to fetch data every 30 seconds. If the fetch fails, I want it to retry every 60 seconds with exponential backoff which caps off at 10 minutes. The refetch on success (refetchInterval) is working fine, it is just the retryDelay that isn't working.
```
const queryClient = new QueryClient({
defaultOptions: {...
How to refetch data from new API? Returns previous value
Hi, i want achieve scenario:
User select value => selected value passed to QueryClient => updated value from QueryClient used to refetch data (new value used for api call)
Component, which sets initial data
```jsx...
Keep error state when doing background refetch
Hi, currently the query behaves like so that when it's current state is error state it will trigger hard loading state on next network call and clear errors.
On the other hand when there is success the hard loading is not triggered.
Can I somehow achieve the same thing for errors?...
mapping through data
Do i have to use a set state variable to map through or why can i not direclty map through data?
can you use a useQuery as a queryFn?
I am debating between making a new api or just using the cashe of another and filtering the results. Is it possible to use a useQuery within a useQuery?
Declaring dependencies and auto-invalidating
To keep my components cleared of query logic, passing around query keys to child components and/or bubbling them up to parents, I'd ideally like to simply declare a relation/dependency somewhere. So that when api/entities/registration is posted to, api/entities/ and api/entity-types/ gets invalidated automatically.
E.g. you have a list view with a create button, which opens up a child component that adds something to said list through the backend, meaning you'd want to invalidate the list's query-key at that on-submit point via the child's onSuccess mutation. As far as I know, you'd pass the list's querykey to the child or have a callback onSubmit exposed from the child that the parent provides, meaning one of them still has to get the QueryClient and then call its invalidate along with the appropriate key.
Since I have many different pages doing the same logic, just to different entity-types, I'd ideally just not have any of the invalidation and querykey-management logic in those components. Any tips?...
React Query V5 infinite loop when using useEffect
Hi,
I tried to migrate React query from V4 to V5 and I struggled to find a solution for this one.
I removed the onSuccess callback for the useQuery methods and instead, use a classic useEffect...
Query not being invalidated
```js
const key = 'paginatedListings'
//Query
const { data, isLoading, isError, error } = useQuery({...
Best practice for selecting a value from a useQuery that returns array
I have a query that returns an array of groups called
useGroups
```ts
export const groupQuery = queryOptions({...re-rendering problem using useMutation
here is the link of my sandbox example in which the component re-renders if we change any input.
onchange of input I update state of that field but I don't know why it re-renders
re-rendering can be seen in the console.
https://6fypr2.csb.app...
What is the best practice for using initial data from another query before the query was settled
Hi!
I have an expensive query that fetches all todo items and I also have an additional expensive query that fetches the todo of a single item.
I would like to fetch all todo items and then use them as initial data for each single query.
This will allow me to invalidate a single todo item without invalidating all todo items....
Check if query finished "loading" when data === undefined is expected (i.e. 404 expected sometimes)?
I'm trying to load a user's profile, given a user ID. The user might not yet have a profile.
The query can be disabled until
userId is know (it's loaded from the phone's keychain). I want to show either a loading screen, a create profile screen, or a view profile screen. We show the loading screen until we know whether the user has a profile and then the create/view screen, depending whether the user has a profile:
```tsx...Query undefined if I reload the page
I'm using rq with nextjs. I'm using the pages router and I'm having the following problem:
This is my query:
```const classrooms = useQuery({...
Using react query to distribute state when using with web sockets
If it is not advised to use react query to distribute some state in app, why connecting query with websocket is a suggested pattern.
References:
1. https://tkdodo.eu/blog/practical-react-query#dont-use-the-querycache-as-a-local-state-manager
2. https://tkdodo.eu/blog/using-web-sockets-with-react-query#partial-data-updates
3.https://tanstack.com/query/latest/docs/react/reference/QueryClient#queryclientsetquerydata...
Authentication, Tanstack Query, React Router
As part of an application I'm building we're looking at using tanstack query in combination with a few other libraries to handle authentication and our API layer.
The problem is that if an authentication error is thrown in a query because a refresh token couldn't be refreshed or something similar, there's no way to catch that without making all queries
throwOnError and handling the auth error from the router.
Any ideas or answers would be very much appreciated....Refetch on window focus
Hi. So i noticed something when I switched from v3 to v5. My queries don't auto refetch whenever the browser window is refocused. The docs say that is the default behaviour and switching back to v3 solves the issue. Is there some new configuration for this that I'm missing?
Devtools performance
Hi all,
My post is related to Devtools. I'm facing severe performance issues as soon as Devtools are open and my queryCache contains a certain number of queries (>50). The query keys are built from a key factory and are then structured (array of 1 Object) and sometimes long.
I had no time yet to setup a codesandbox but I made a (bad) video to illustrate the problem, based on the
basic React example....Can manage to understand optimistic update.
Hello there,
I'm trying to implement optimistic update in my application but I struggle a bit. Here is my function :
```ts
const addCardToCollection = ({...
Utilizing newData and oldData properties in refetchInterval
I would like to base the number returned by my
refetchInterval function on whether newData and oldData are equal. I have looked at structuralSharing and the deprecated isDataEqual options, but it seems like both of these have changing the result of the query in mind. I just want to be able to leverage this property to make a judgment about how fast to refetch. How can I do this? Would I need to provide a function to structuralSharing and then pass the query into the refetchInterval...documentation clarification
Hi,
"When dealing with mutations that update objects on the server, it's common for the new object to be automatically returned in the response of the mutation. Instead of refetching any queries for that item and wasting a network call for data we already have, we can take advantage of the object returned by the mutation function and update the existing query with the new data immediately using the Query Client's setQueryData method:"
from: https://tanstack.com/query/v4/docs/react/guides/updates-from-mutation-responses...