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
Persisting mutations for offline
As far as I understand it RQ supports offline in that it can paused mutations while you're offline and then resume them again. However, what if we want offline to support e.g. the app being closed and thus requiring persisting the mutations (e.g. the variables/context) that got passed to them. Is there an established pattern here?
How matchQuery work ?
I have a little problem with my query cache. I read this excellent article for good way to use react query : https://tkdodo.eu/blog/automatic-query-invalidation-after-mutations
Well Ive setup this client :
```tsx
const queryClient = new QueryClient({
defaultOptions: {...
onSuccess, onError, onSettled all calling after mutation...
Hey there 👋 I've run into a strange issue where all my mutation callbacks are executing after a successful mutation call. I am using tRPC, but I don't expect that this should be related to the issue. Any help figuring this issue out is greatly appreciated.
Procedure definition:
```TypeScript
createPostComment: authedProcedure...
Refreshing Data After Deleting with useQuery Cache
Hi,
I’m using useQuery to cache my data, but I want to ensure that the data is refetched after performing a delete operation. Currently, when I reload the page, the data is stale due to caching. What is the best way to trigger a refetch of the data after deleting an item? Should I use queryClient.invalidateQueries or is there a better approach?
Thanks for your help!...
Schedule an invalidation of a query
I have a page that displays either videos or images, one at a time. Videos play until they finish, while images are displayed for 5, 8, or 15 seconds. Once a video or image ends, the next one is shown. I fetch these videos and images through a query, which is invalidated upon a real-time database change to update the content. However, I don't want the query to be invalidated immediately when a change occurs. Instead, I want the query to wait until the current video finishes or the image's set duration has elapsed. Only then should it invalidate, ensuring a smooth user experience.
Code:...
Pattern for mutations that trigger queries and further mutations
Hello all so using react query v4. Still fairly new to it and trying to figure out the best practices. I have a submit command that will need to do the following;
1. calls an api with a payload and that api runs an async task to update
2. polls another api to see status of the async job above
3. once poll completes with a status of success update another api with the payload...
Webpack issue upgrading React Query from v4 to v5
After upgrading
@tanstack/react-query and @tanstack/react-query-devtools, Webpack (v4) fails to build my application.
```
frontend-1 | ERROR in ../node_modules/@tanstack/query-devtools/build/index.js 5:2
frontend-1 | Module parse failed: Unexpected character '#' (5:2)...How to work with prefetch query in NextJS app router?
I've been trying to set up prefetch in NextJS App router using the guide at: https://tanstack.com/query/v5/docs/framework/react/guides/advanced-ssr
but it never seems to work even when I have the same code from the docs....
What is the basic response model required by useInfiniteQuery
I am using KUBB with pluginTanstackQuery to generate Tanstack Query hooks from an OAS3 spec (Swagger). I have limited access to how generated queries are created e.g. no access to define getNextPageParam from UseInfiniteQueryOptions where I could do calculations of "pages" if thats not part of the response. So what would be the "default" way for a response to be constructed to work out of the box with useInfiniteQuery so to speak? The current response model looks like this: `{totalCount: number...
How to update component B when the useQuery within component A finishes successfully?
I have a component A in the main part of my app which makes a call using
useQuery, on successful completion I would like this data to also show up inside component B. Note that component B is not a child or sibling component, it live in another place, being show in a sidebar. I am not sure how I should do this.
In the past the onSuccess callback could be used to maybe persist in a state manager and share the data in such a way. I could do the same using a useEffect but I just want to check before I act 😉 Thx in advance.
It's important for component B to change whenever the data changes....Using typescript - How do I set a custom type for useMutation?
I want my useMutation to contain it's regular mutate, inLoading and others but I also want it to contain percentage. How can I set the type?
```ts
interface LUejeczob2
extends Request<{ type?: MediaTypes }, null, { file: File }> {}...
Best way to catch/handle errors during streaming
Hello, I am getting the error
A query that was dehydrated as pending ended up rejecting. but I am unable to try/catch it and unsure of the best way to handle these errors.
snippet/example of what I am doing:
```ts
......How can I call an unknown amount of useMutations or set MutationKey in mutateFn?
I need to set the
mutationKey for each item so I track the loading status in another component. Correct me if I'm wrong, after reading the docs and some research.
- there is no useMutations like useQueries which would allow me to create the useMutationObject and pass in the key for each useMutationObject
- I cannot set the mutationKey in themutationFn
Thank You! Unfortunately im on v4 for now ...getQueryData returning undefined unless exact key match
I am trying to use one cache as the initial value for another, following https://tanstack.com/query/latest/docs/framework/react/guides/initial-query-data#initial-data-from-cache
Example code
```const useCustomHook = (param) => {
const queryClient = useQueryClient();...
Needs to clear cache in dev (stuck fetching), but works in prod
My webapp is using nextjs14. When i load the page, the query is stuck in fetching. when I update a filter the query works, and fetch every 3 sec as i want to. but when i remove every filter, the request is stuck in fetching. This is the code
```ts
"use client";
...
useQueries and memoization
This might be a lack of react knowledge but I will just go ahead and ask it here. I have a custom hook using useQueries to call multiple endpoints in parallel. The result is mapped using the combine property, outputting a data variable which is used in a component. The component is using useState for several reasons, updating that state triggers the hook once again returning another reference to an array containing the same data. Is their a way to prevent this from happening? In my case I am pas...
Pages is undefined when I enter the page through a link, <Link> tag or react-router-dom's navigate()
When I access a page where useInfiniteQuery is being used, through a link that was present on another page, either the <Link /> tag or the react-router-dom navigate, I am receiving an error message. When I reload the page, the error disappears and I can use the page normally without any problems. A palliative adjustment I made was to place a window.location.reload() after navigate.
I checked and my API is returning the data correctly and in the appropriate format.
I isolated the query on another page of my application with just a console.log to check the query results and the error continued to occur when accessing it through a link.
Error Message:...
How can I access to an invalidated query
Hey guys, I have 2 separated list, for instance I have a list with key ['list1'] and the other with ['list2'], both are using a stale time of 5seconds. When I navigate from the first to the second list, the query ['list1'] has no more observers and become inactive, and when I switch back to 'list1' before the 5seconds of stale time, the function is neither refetching nor taking the cached data (before it has been inactivated).
- How can I not invalidate the query while navigating to the second?
- is it the intended behavior or am I doing something wrong?
- What should I use in my case?...
useQueries & queryOptions typing issue
Anyone else running into issue with code similar to:
```
const queries = [...