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
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...Querying an API for a Details screen without a "details" endpoint
I'm using React Query with an API that has an endpoint where one can get a list of Foo's, but there is no endpoint to get the details of a specific Foo. I have two screens: a List screen and a Details screen. The List screen is set up to use the
useQuery hook and call the API's list endpoint and populate the screen with an entry for each Foo. Each entry is clickable, and clicking will open the Details screen (passing in a unique Foo ID). However, that is where the data stops.
The Details screen has no way direct way to get the Details of a Foo, as there is no API endpoint for it. The best option I see is to use useQuery again, and hope it hits the cache from the List screen (the list endpoint includes all the details), instead of sending out a new request. That still feels like bad data practice, though. A second option would be to use QueryClient.setQueryData to set each individual cache for each Foo, but I feel like that may also be frowned upon from a "best practices" perspective (setting the query data outside the normal way, fetching).
What should I do in this scenario?...Using custom hooks in loader function
hi, i dont think the docs for Tanstack Router make it clear enough how to use hooks in your loader function. I understand it can be passed through context, but how will it be used? Passing the hook to the context and using it still throws the react error "hooks can only be used in components"
```ts
loader: ({ context: { useCustomHook} }) => {
console.log(useCustomHook()); // = error...
What is the recommended way to trigger a GET just once on button press?
I have a GET call that I want to trigger only once when the users clicks on a button, is there a recommended way to use useQuery so I can benefit from the loading/error handling?