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
Persistence: how to call save only when `data` is updated?
I'm using
persistQueryClient function to restore, subscribe and save query cache to async storage.
What I noticed in the sources is that persistQueryClientSubscribe subscribes to all changes in query cache and calls persistQueryClientSave in callback:
```
queryClient
.getQueryCache()...Is it good practice to pass successful query data in Context ?
When using useQuery, you usually check if data is available (not fetching, no error). Once this check is made, does it make sense to pass the available data in a React <Context> so that all componenents within that tree do not have to check again if the data is fetching or not ?
fetch token and refresh token
so the plan is on the Login page, first I call /login then I get refresh token back, then I need to exchange for an accessToken.
So I have a AuthProvider, which is wrapped in a higher level of the whole app:
```js
const [auth, setAuth] = useState<string | null>('');...
How to perform enabled on useQueries
Hi, I'm receiving a response body and I want to run a series of queries on that request body using useQueries. However, I can't seem to find a way to only run useQueries when the response is not undefined.
```js
const vehicleQueries = useQueries({
queries:...
Is there a way to force suspense even though response.status is 200?
I am using react-query to communicate with my API. I got this case where i need to fetch some data from API but first i need to check if my DB is loaded (http request is called every 1sec) - there is a seperate endpoint for that which returns something like this: {status: "pending"} while db is not up yet and {status: "loaded"} while DB is up and running. In both cases response.status is 200 and suspense fallback is not rendering while request to the API are still running. Is there some easy wa...
How to perform dom operations after query is updated
I am using react query to display paginated data in a table. When the user clicks on the next "button", I am updating the query key with the new pagination info, trigerring a new fetch. When that fetch succeeds, I would love to scroll to the beginning of the table. Should I use the onSettled prop to achieve this behavior ? However my problem with onSettled is that I would like to avoid performing the change on the initial page load.
How to use onSuccess or onSettled in useQueries ?
Am I missing anything ? checked terminal console and browser console, no data is printing.
PS: Api calling are happening on server side...
How to pass new params into an existing invalidation
Hi all, I just made a post but actually narrowed down the issue, I'm keeping that post open as it has some context that might be useful. Please check it out if you'd like a bit of background on what I'm doing.
Essentially I have an analytics page and whenever someone changes the date range or updates their current view we refetch some data.
I have it setup right now to where if you make those changes, data refetches but the query doesn't actually use new params. Same id, same "date range" same view, same everything. I confirmed this through the network tab on my devtools. I need to somehow REFETCH/invalidate AND update the params to the new ones....
Query isn't refetching properly with invalidateQueries?
Hi all, I have an analytics application which refetches data every time the user updates the date range. The payloads are really small so the UX isn't actually all too bad when it does work, and this is the approach we're taking.
I want to refetch data every time this is updated, and here is the approach I am taking:
const queryAnalytics = useQuery(['analytics'], ()=> getAnalytics(dateRange?.startDate.toISOString(), dateRange?.endDate.toISOString(), props.selectedRestaurant.id), {enabled: props.loadAnalytics})
...react query useMutation does not retry with updated state
Quick question, useMutation when it is retrying doesnt update the state, see below:
```javascript
// type MyQueryVariables always has accessToken
type MyQueryVariables = Record<string, unknown> & { accessToken?: string };...
custom useQuery
Hey guys, ive been working on this and stumping myself for actually 8 hours today. I figured it would be pretty easy to create a useAuthenticatedQuery hook to simply respond with the access token in the queryFn, but with typescript it has been a total nightmare. Any help would be appreciated
```javascript
const {accessToken} = useAuth()
const subscriptionQuery = useQuery({...
mutation.isSuccess not working
I have a submit function that when called, I want to do a mutation. If a successfull mutation, I want to do some action and if error I want to do a different action.
My code currently is not catching the
mutation.isSuccess even though there are no errors.
```js...Should React-Query only be used for api calls?
I'm working on a project involving connecting to a bluetooth device, which is an async process. I've opted to use react query to get the same state management that I'd expect from an API call, but I'm getting some pushback from the other devs on my team saying it should just be used for API management. Curious what everyone else's thoughts were because I always operated under the thought that react-query is state management for anything async, not just APIs
Exposing refetch from Provider: How to type it properly?
How do you type the returnType of
refetch when you expose it from a Provider?
ex.
```typescript...NProgress with React Query
I wanted to add NProgress bar for every ajax call (whether it be query or mutation).
What's the easiest way to tap into react query's cycle of initiating call and finishing it to inject
NProgress.start() and NProgress.done() handlers?...How to use react-intersection-observer with useQuery?
I don't want to fire
useQuery until the container is in view. Here is the code I have written:
```
import {useInView} from "react-intersection-observer";
//other code
const {ref: inViewRef, inView} = useInView({triggerOnce: true});...[SOLVED] data fetched from useQuery don't get populated properly
So I have
```js
const [userData, setUserData] = useState<userDataTypes>();
// get user data
const {isLoading: isLoadingUserData} = useQuery(...
How to get global access to all mutations that are running?
I am making an app where offline support is critical. I have managed to get mutations to work for offline usage. One thing that I am missing is the ability to see the status of each mutation. to see if it fails, succeeds or is still loading. There will be a component where you are able to see all of requests and their respective status. Any tips for how to getting access to the data?
useQuery onError handler won't accept a promise
Hi all, so I'm a little confused. Is there a reason that useMutation onError handler will take a promise, but the useQuery onError won't? I'm trying to deal with a situation where when a query fails, I want to do some async stuff. I'd like to do it in a way where I use async/await. I know there are ways to work around it basically ignoring the promise, but I'm just curious why one takes a promise and the other doesn't.
RQ Version: 4.22.0...
isLoading defaults to true?
I create a useQuery, enabled set to false. I want fetching to occur on demand, by clicking a button. Why is "isLoading" set to true initially?
https://codesandbox.io/s/epic-lucy-ppu5x6?file=/src/App.js:1849-1943...