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
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....
How to avoid re-fetching query after resource is deleted
The user is on a page with multiple items (query
["items"]) and has one items selected that shows more details (query ["items", id]) and the selected id is stored in the URL as search param.
Now the user deletes the currently selected item which triggers a mutation in a child component.
1. The mutation hook then invalidates ["items"] in the onSuccess callback.
2. The child component uses the separate onSuccess callback of the mutate function to let the parent know that the resource was deleted....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 = [...
Prevent react query from creating empty keys even happening when enabled is not satisfied
Hi,
I've find some weird case with useQuery, where create two keys while fetching, where the first is the one with the data is empty or undefined.
So in simple terms I have two keys like
...
Will calling mutate trigger Window Focus?
I put a Button in a Popover component. The click event is to call the mutate method of useMutation. After clicking and requesting, the Popover automatically closes.
Some piece of code is setting the wrong value in the cache, and I can't figure out which one it is
I have around 20 different callsites where I
setQueryData on a key. While I could go over one by one, comment them out, then comment them back in, is there a way to kind of get in between and print the stacktrace of all setQueryData calls, and which value it is setting the cache entry to?Using react/query for non-async/global store.
Hey all I am attempting to use React Query to store some positions I am calculating onLayout.
```
import { useMutation, useQuery, useQueryClient } from "@tanstack/react-query";
export const useGetLinePositionById = ({ id }: { id: string }) => {...
can you force clear the cache of specific queries?
I have a few large queries that cause an out of memory exception. Wondering if I can manually/selectively clear their cache instead of clearing the entire cache