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
onError not triggering
Hi!
I know this looks insane. I am chaining multiple calls together (it's very temporary!). The
onError: () => deleteFirstThing.mutateAsync(_data.id) isn't triggering. I know the call works. createThing.mutateAsync part returns a 403 atm. Any thoughts?
```...InfiniteQueries page refresh
I have a NextJS app that features products. When a user is browsing products via an infinite scroll and clicks on a product, they go to the product page. When they go back, they're in a route that looks like this: example.com/feed?page=3. How can I use infinite query feature such that when they go to page=3 I have pages=[1,2,3] in cache ready to display? Say these 3 pages aren't in cache. How can I use the useQuery or a useEffect so that it fetches the three pages while the user waits for this to load?
Seems like a common flow in infinite scrolls, but haven't found a way to do this via React Query...
useInfiniteQuery's enabled seems to not be working
For some reason I can't get the
!router.isReady to work together with useInfiniteQuery, the query already loads before the router is ready, and due to that I do not get the data I need from the server. If I leave the webpage open and edit something and save in VS Code, then the values get spread and work, but upon reloading the page the same issue occurs
```js
const handleQueryParameters = (parameter: string[] | undefined | string) => {
if (!router.isReady) return;
...Mutate Async not working as expected
Hi all, I posted earlier about how to do a certain task. I decided to use async await with the
mutateAsync method on my mutations. I set everything up and it all seemed good, until I started running the code.
Essentially, I'm getting undefined, and it seems to be running out of sync. Its laid out one after the other. Here is a code snippet:
```...how to invalidate w/o refetching all data
New to react-query, and wanting to know how I can invalidate query w/o needing to refetch all data. E.g., if just adding a caption to a post (one of many), no need to incur the expense of a full requery, but this is precisely what react-query is doing when calling invalidate. Surely there's a more efficient way, but not popping for me reading the docs. Any advice much appreciated. Thanks!
is there a fetch on demand utility on react query?
I've decided the react router's
useFetcher is too awkward to use when not using remix. I do like that it is event driven though. You imperatively call .load() when you want to fetch data. Is there a react query alternative to this? something like:
```tsx
const query = useQuery({enabled: false})
...Access data from a query on component level
Hey, I am using react query and the graphql-client in next to fetch data from contentful. All pages are defined in contentful. Every page has a pageType. On page level [[...slug]] I fetch all the pages via getStaticProps. So now I have all the pages available. My question is how can I access the pageType of a page on component level? Can I find the data of the page in some kind of context? Or do I have to create a react context for the client side to make it available in my components?
How can I conditionally fail after getting a response before `select()` is called?
I'm trying to make calls to Cube.dev which sometimes returns an
200 with an object that looks like { "error": "Continue wait" } for a long running query. If this is the case I need to seamlessly retry the request until the data is available.
I thought I'd be able to do this with the onSuccess callback.
```
onSuccess: (data) => {...React-query, prefetch and fetch
Using react-query, what happens if you prefetch and while the prefetch is still happening, you click on a button (or whatever that triggers fetch) that fetches? Does the prefetch get cancelled, or does the fetch get cancelled? If both do not get cancelled, which data would be used? What if the prefetched data are stale and the fetched data come before the prefetched data?
React Query vs React's Context API
Hey folks,
I'm using React Query in a project and the idea is to use this in place of context providers. However, my question is, whether having both in a project is suitable? I understand they have different purposes, but it would be great if someone could outline when you would use one over the other (or use both for that matter).
Also, I have an example where I feel like using React Query is overkill, but would appreciate some feedback. The issue is, there is a page where a user selects an option in a dropdown and clicks on a button to continue their journey. I use the
useState hook and the context API to store the value of the dropdown, in order to access it on the following pages....Chain useMutation together, make them rely on one another
Hi all, real quick react-query question (maybe not so quick!)
I'm a bit stumped. Inside of our application we do a bit of promise chaining. This serves two purposes
1: Logically, the promise must complete before another one gets sent, this is just how the application works
2: The execution of the promise relies on data from the response of the previous promise. For example, we send an order (the DB generates an order number and sends it in the response) and then we use said order number to put on the customers receipt....
What are the differences between refetch and invalidateQueries?
Hi, It is understood that invalidateQueries invalidates queries and active queries are reacquired in the background.
When is refetch used?...
Await invalidated queries
Hi, is is possible to await the refresh of a query you just invalidated ? For example instead of queryClient.invalidateQueries({ queryKey: ['todos'] }) I would like to to something like this, await queryClient.invalidateQueriesAndWaitForFetch({ queryKey: ['todos'] })
Checking if initial fetch in v3
Hey,
is it possible to know whether it's the initial data fetch in v3?
I can see that v4 has
isInitialLoading.
Thanks in advance!...React 18 experimental use() hook
Is it possible to implement the new use() hook in queryFn? Or will it just be redundant?
Thanks!...
Multi-step query status / generator functions?
Hello! My app has a number of really complex mutations that often have multiple steps. I built mutation functions as generators that yielded status and a framework that would continue to await those generators until they finally completed.
Part of the way into this, I realized I was rebuilding react-query-like functionality. I'm curious if there's already facilities to do something like this in react-query, or if not, is there a suggested alternative?...
Why does SSR with Next.js runs queries twice?
I have the following code following the official docs and I constantly see two requests. Why? Isn't supposed the dehydrate pass the data
automagically? - I am using also the _app.tsx config from the docs (https://tanstack.com/query/v4/docs/react/guides/ssr)
Code:
```
import Head from 'next/head'...New to React Query - unsure how to deal with state management for a multi select search form
I have a form input that allows selecting of multiple users. It's a search input and the user types a username and submits the form, which fires a query that returns a user. This user is then added to a 'selected users' array. I need to display a list of these selected users in my form. What is the colloquial way to access the previous query state, given that the query changes and the
data only contains the user returned by the most recent query? I don't want to duplicate the selected users st...Allow to persist meta in localStorage
Hi, we notice that when using
createSyncStoragePersister the meta of the query is not stored at all. This used to be the case in V3 (and was very handy). Since meta is your own playground it seems that this should be added? (see https://github.com/TanStack/query/blob/main/packages/query-core/src/hydration.ts#L60)
We are currently using it like so, this allows us to specify on a Query level if we want to store it in localStorage or not:
```typescript
const queryClient = new QueryClient({...call 2 independent endpoints in one useMutation or should I use 2? What's the best practice?
I have one form and one save button, but the content of the form goes to 2 endpoints. They are somehow independent, which means they don't need result to each other to be operated successfully. Is it best that I have :
```js
useQuery for endpoint 1
userQuery for endpoint 2
useMutation for endpoint 1...