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
Suggestion for accessing useQuery data
Context:
We are looking forward to migrate our async data handling layer of useContext + useReducer to react-query.
Currently we are in react v17 which means we have use react-query v4
We have an page which has header section (with high level info) and side tabs. Each tab will have multiple api calls (both parallel and dependent ones) and also multiple components which might only interest in specific data from specific api....
How to initiate search params from initial api response without triggering re-fetch?
1. I fetch initial data using
useQuery and no search params that are passed down as args and part of queryKey
2. Endpoint returns initial parameters.
3. I add these initial parameters as search params to the URL
4. I retrieve these params via useSearch from the router to show UI based on it it
5. Since search params also feed the useQuery and now that params exist, queryKeys changed, and data is fetched again...fetch "get" data in form submit
Hi,
I don't understand how I can retrieved data in my submit function.
I have to validate that some data still exist upon submission by calling a get api and see if the object is still there....
invalidateQueries / setQueryData post mutation not triggering the rerender of all consumers
When I invalidateQuery or setQueryData post mutation only component that does the mutation getting the rerender. other components are not rerending.
https://codesandbox.io/p/sandbox/react-query-not-rerendering-on-data-change-fx3fw7?file=%2Fsrc%2Ftodo.tsx
I am not able to trigger rerender for all the consumers of the data....
initialData vs hydrate/rehydrate
I am having a hard time understanding the difference between the two.
Any example I come up with works with both.
Here is my general understanding of react-query:
...
useQueries understanding which query's response updated?
The useQueries hook returns an array with all the query results. The order returned is the same as the input order.
How can we distinguish what changed? For example, I have 2 queries, imagine one takes 5x longer than the other one. The useQueries hook keeps rerending the component because the second query is still loading.
Query1: L L L L L S
Query2: L L L L L L L L L L L L L L L L L L L S...
Google Sheets API request in NextJS App router
I'm developing a NextJS app (v14) with server components, integrating React Query.
I've set up the QueryClient Provider for SSR and client-side caching (https://tanstack.com/query/latest/docs/framework/react/guides/advanced-ssr).
When I log the request in the query function, it successfully fetches data....
useQuery returning previous user data after logout, then login
@tanstack/react-query: 4.35.5
So I have a situation where I have a useQuery that gets the user data, it has a fairly static key of ["user", "me"] - at that point I don't know a userId so I can't use that. The query is only enabled when the app has an accessKey with which to request user data.
When the user logs out, I clear the access key, then call removeQueries()....
hi friends, please help me with this
I was building a movies web app using react and tmdb api and I have a page called Movies.jsx where all movies are fetched using react query and that's works fine and I also have movieInfo.jsx page that responsible for showing details of a specific movie based on id in url (movie/1233) and i grab that id using also react query the problem here is when I open a movie and go back to movies list and then open another one the movieInfo page shows the previous movie data but after some seconds it's re rendering the ui and show the one I clicked on, how to solve this issue so the previous movie info will not show after clicking different movie ?
Im new to react query, Thanks
Trying to fetch data using react query...
Invalidating useSuspenseQuery after mutation
Is it possible to invalidate query after mutation while I'm using useSuspenseQuery?
Streaming with Remix
Is it possible to stream in a query using a remix loader? https://tanstack.com/query/latest/docs/framework/react/guides/ssr#full-remix-example
The examples on this page all await the api to fully finish before rendering the page which isn't the user experience that I want. I want to stream in the response instantly but kick off the api on the server for better performance. Is there a way to achieve this?
I've seen the Next JS app router has an experimental package for streaming https://tanstack.com/query/latest/docs/framework/react/examples/nextjs-suspense-streaming, is there anything similar for remix?...
Data is still undefined even after declaring isPending and isError in React Query V5
Hello, I just recently upgraded to React Query V5 and I noticed that the behavior of
isPending and isError has changed.
Previously, I was able to define them as guard clauses and data would always be defined afterwards:
```
typescript
// React Query v4...Enable doesn't work with NextJS14 in tanstack/react-query v5.28.4
Currently enabled is not working even though I have set it to false.
I use tanstack/react-query version 5.28.4 with NextJS14
Can anyone help me?...
Many children subscribers vs passing from parent
Is there any performance considerations when you have many components that subscribe to a
useQuery
Is it better to do this
```ts...Is it intended for useQuery to read latest data when `enabled: false`?
I'd like to have
useQuery calls that read w/e data is in the query cache without fetching.
One useQuery call could initiate the fetch while other useQuery calls (with the same query key) read w/e data (regardless if it's stale) from the query cache. For all the other useQuery calls, is it okay for them to have enabled: false?
Lmk if a code example would make this more clear. ty...useSuspenseQuery returns last error instead of fresh data
Hey 👋🏽 ,
I need some help. I'm using TanStack Router with TanstackQuery and want to make use of useSuspenseQuery. The problem is that the last error (401) that led to a login is also returned the 1st time after a successful login by useSuspenseQuery, without requesting the resource.
```js
export const Route = new FileRoute("/vouchers/creation").createRoute({...
clear persisted cache from sessionStorage
Im trying to implement sessionStorage and want to clear all after logout, what is the way to go for this?
```ts
const queryClient = new QueryClient({
defaultOptions: {
queries: {...
useQuery handle logout for 401 errors in global callback
How can i handle logout for 401 errors in global callback in useQuery ?
i want to logout once the 401 error occurs
main.jsx
```tsx...
Is it expected that queries with a `gcTime` set aren't used by `react-query-persist-client?
I have a setup like this:
```typescript
import { createSyncStoragePersister } from "@tanstack/query-sync-storage-persister";
import { PersistQueryClientProvider as BaseProvider } from "@tanstack/react-query-persist-client";...
Is there a way to manually set the entire cache to a new value?
I need to update a value that appears in many places so I wanted to avoid passing a
queryKey to setQueryData(). I've written a recursive function that gets the entire cache and updates every occurance of the value and returns a new array. How can I set the cache to this new array?
(If there is a better way of doing what I'm doing I'm open to suggestions)
Thanks...