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
How does React Query trigger a render?
Hello, I'm trying to track down a possible bug with dependent queries in React Query v4, and timers in Jest. I've encountered a similar issue with Cypress before (https://github.com/TanStack/query/issues/4655). I think the problem is related to React Query's use of timers but I'm still trying to debug.
My question is: where in the React Query code does it update its state so that observing components re-render? In useBaseQuery.ts I can see that it calls useState initially to create an Observer (https://github.com/TanStack/query/blob/96cdb28d311772774323c05a75372ed05eedfde8/packages/react-query/src/useBaseQuery.ts#L62) but I don't understand how or where that observer is updated so that it triggers a render when data is returned from the fetch function. I was expecting some sort of call to setState somewhere but I'm not able to find it.
In my test I can see that the dependent fetch function fires, and data is returned, but it doesn't look like React Query is then updating the observers....
useMutation onSuccess trying to add new row of data to UI, not working
I am a newbie with this library. Attempting to implement my first
useMutation. Everything is working correctly on the backend. Now on the front, I want to reflect the new ingredient that was just added in the table. I read on their site that the usual practice is passing back the newly added entry after adding something, so no extra network calls needed. I am passing the new ingredient back and I can see it in the data. But the ingredients table is not updating. I don't understand react-query enough to understand what variables is or where it is coming from. But I'm thinking one issue or maybe the issue is that the id in variables is blank.
Here is my useMutation code:
```js
const { mutateAsync: insertIngredientMutation, isLoading } = useMutation({
mutationFn: insertIngredient,...QueryObserver with partial key
Is there a way to subscribe to multiple queries with a partial query key? Say, for example, I have the query keys ['person'] as a meta-key, and then the individual people are stored in the cache with the keys ['person', 'some-id'], ['person, 'other-id']. I want to observer the cache, and get notified any time a person key changes. Is there a way to do that with a QueryObserver or something similar?
Mocking react query data for react-testing-library
Hello all! Huge fan of ReactQuery and starting to introduce testing into our app. My use case is that I have a banner, which has a custom ReactQuery hook that fetches data to show in the banner (an object of string values).
I'd like to mock a test response and verify that the data is rendered in the component. I'm using react-testing-library and jest to run the test.
I've properly wrapped my render method with a QueryProvider...
ensureQueryData parameter type mismatch queryOption?
Hello all, thank you for your help in advance.
Trying to implement a paginated query in router loader following example repo as well as https://tanstack.com/router/v1/docs/guide/external-data-loading#a-more-realistic-example-using-tanstack-query
I can't quite figure out how to get ensureQueryData to be happy
```js
// loader...
optimistic update with pagination
In my task management app, I have tables for different task statuses (with sorting and filtering). Each table also has pagination (max of 50 tasks per page). Now, when I change the status of a task, I want it to update optimistically. This requires -
1. removing the task from the page where it initially was and also adding one task from the next page (if there is one) to maintain the 50 tasks in one page. Then a refetch for this page.
2. checking the currently visible page of the new status and adding the task to the page if it is meant to be on that page (based on the sort order). If it is, then I need to delete one task from that page to maintain 50 tasks in one page.
...
What is the preferred way to replace onSuccess callback?
Hey I am doing the migration from v4 to v5 and was wondering what is the preferred way. I have read blog posts about and might have missed something so came here to ask. For example I have used onSuccess parameter for onSuccess callback handling push notifications.
How to show loading state only when specific param change
i am using a useInfiniteQuery in trpc. They query has the params similar to
```js
{
cursor: z.number(),
pageSize: z.number().min(1),...
[v4] Measure loading time of a query using QueryCache
Duplicated from https://github.com/TanStack/query/discussions/6730
Hey,
I'm implementing a hook that observes all queries coming to react-query and detects the ones that have poor latency. While implementing I stumbled upon an issue - loading queries have
dataUpdatedAt always at 0 (because they're loading so there's no data yet). Because of that, I can only detect slow-loading queries only on a page reload when they're picked up from query cache.
...firebase firestore subscription example?
Is there a way to use react-query to listen to firestore subscription?
refetchOnWindowFocus not working on in 5.17.15 ?
Hi everyone, I just setup react-query in a new React Vite project, but
refetchOnWindowFocus doesn't work for some reason.
I tried downgrading to 4.x.x as a sanity check, there it seems to work as expected, is there anything I've missed?
```ts...Options to load query after refetchInterval but not on initial page load
Currently using "refetchInterval: 60000" to refetch the API every minute but if I use "enabled: false" it won't work anymore.
I basically only want the API call to be done either after a minute or if I do a manual refetch()....
Problem with Optimistic Updates
I've been reading the documentation [https://tanstack.com/query/v4/docs/react/guides/optimistic-updates] and I'm getting several errors
in my code which is as follows:
```tsx...
How to show an error message after rolling back and before the invalidateQuery is finished
I have a list of products that can be added to a wishlist and in my case I add 3 products at the same time I know there will be an error so I do rollback using invalidateQuery but I want to show the error message after the products are reflected not before that
using initial data only on first fetch
I am filling the initial data for 5 queries from the response of one top level query (to prevent 5 calls). However, when I change the query key for any of these queries, I want it to refetch without using the initial data again.
How can I do this?
For more context - I am using this in a pagination setting where the first page of 5 tables is fetched using 1 call and then when the user clicks next page on any of these tables, I want it to fetch the second page without using the initial data (which was meant only for the first page)...
How do you organize your project?
We have a medium size react application organized with pages/containers/components/etc and I'm trying to figure out where to put the react query hooks? (we don't have specific hooks files/folders yet)
✅invalidation issue
I'm struggling with invalidating cache for general query. Looking at docs (https://tanstack.com/query/latest/docs/react/guides/query-invalidation) my code seems to be similar, aside from extracting queryKey to function and encapsulating cache invalidation into own hook.
Reproduction steps:
- navigate to codeSandbox: https://codesandbox.io/p/sandbox/hidden-dream-forked-wpd4z8?file=%2Fsrc%2Frq.tsx
- open console (it should only have
getting Users )...Getters
Hi, I have a general question regarding vue/pinia/tanstack pattern. Working on a vue app where we have a number of pinia stores in which we store data fetched from our api. Often in the same stores, we have a bunch of computed refs, which are based on the retrieved data.
I would like to replace the data fetching and storing/caching of data with Tanstack, but I’m unsure of where best to put these extra getters. Pass a select function maybe?
Would love some input. Thanks....
in useMutation, how to get error status code inside onError?
```ts
const {
data: getPricingData,
isPending,
mutate,...
Query reloads
Hey, My App reloads all react queries every 5 minutes even if I'm continuously interacting with the app. Struggling to find the root cause. Any pointers to debug this further? Below is my client configuration
`export const queryClient = new QueryClient({
defaultOptions: {
queries: {...