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
If the mobile app goes to sleep, on resuming the cache is cleared and the app crashes.
Hey there, I'm currently working on a React Native app and I'm trying to solve for the case where an app went to sleep in the background and was resumed.
I'm currently using the 5 min default cache for my cache and refetching on screen focus with the React Navigation focus hook.
To prevent the crash from happing I was thinking of two solutions. One use a client side state management as well and fetch when stale like normal. Second, I could set the cache to Infinity for the few queries I never want garage collected....
Next 13 Hydration Example
Hey everyone 👋
I'm new to Next13 and React Query and I was going through the SSR docs and am having some difficulty understanding the
dehydrate -> hydrate method for server components and its children client components. Docs: https://tanstack.com/query/v4/docs/react/guides/ssr#using-hydrate
I setup my query provider using the getQueryClient snippet, a posts/page.tsx that performs a fetch I plan to use in my client components (getPosts) and renders a HydratedPosts.tsx component.
HydratedPosts is the same as the docs...How to handle 404 responses with TanStack useQuery?
Howdy folks. I am relatively new to React and trying to figure out how to update my queries to handle 404 errors. Should that be handled in the queryFn or using the onError function? I assumed that should be handled via the onError function, however when trying to provide proper type declaration to the parameter like in the screenshot, VS Code is telling me
No overload matches this call
Any advice is appreciated. Thanks a bunch!...
Persister writing every 1 second
Hello,
I just noticed that my persister is writing every one second with the only difference being
timestamp. I narrowed it down to a "DigitalClock" component that I have:
```...How do I get background refresh working in React Native like web?
I'm working on my React Native app currently and I'm trying to get React Query to mimic the background refresh behavior like it does on web. Currently looking at these docs but the solutions don't seem to be working for me. Any tips?
https://tanstack.com/query/v4/docs/react/react-native...
How to share data between different query keys?
For context I am working on a UI for a music player. I have an endpoint that returns information about the requested album, optionally you can request that the end point also include all the songs in the album.
Most places in the UI I don't need the songs to be fetched as they are only visible when the user navigates into the album.
I have a query like so...
notify when query is done
i have a function which is trying to get queryCache data.
this function returns undefined because query isnt done yet.
how to notify this function to re-render when the query is done?...
Overwriting defaultValues from React Hook Form with data from useQuery
Hello, I am having trouble mixing useQuery from React Query together with React Hook Form
```js
const { data, isLoading } = useQuery<AddEventFormData>(
["eventDetails"],
() => getEventBySlug(id),...
isLoading is initially false, so it cause my loading spinner not show up when component mounts.
Is there a way to set isLoading to true initially?
So isLoading right now works like this :
false => true ( fetching ) => false ( fetched )
I want it to be:...
useQuery keeps fetching data even tho the dependency doesnt change
useQuery keeps fetching data even tho the dependency doesnt change.
```js
const router = useRouter();
const { adid } = router.query;
...
Debounce queryFn on useQuery
I'm trying to implement a search component with
downshift and tanstack-query.
I'm trying to debounce my query function and not my query key as I also need the isLoading state to kick off as the user starts typing, I've had no luck. I've used packages to debounce my queryFn (axios) like lodash debouce, use-debounce but had no luck.
```ts...invalidate query after queryClient.clear() no longer works
I have an app where I clear the query client using
queryClient.clear() when the user changes the app langauge. It makes sense because I want all queries in the previous language to be cleared. Anyways after that I try to invalidate previously mounted queries and they no longer invalidate, however invalidating the queries before clearing inavlidates them correctly.
What am I doing wrong? Why can't I invalidate after clearing?
Here is a code sandbox:...Spacing network requests with `useMutation`
We have an audio player, each second a mutation sends a POST to persist the user's progression.
We don't really need to be that precise, and it would be ok for us to only send that post every 5 or 10s.
Something like this might work:
```js
const mutation = useMutation((progress) => {...
Passing placeholderData with a graphql query
Im using React Query in a React Native application, which uses React Navigation for its navigation. If you're not familiar with that, the part thats worth noting is how the routes/screens are recommended to have just a single id/PK/identifier to each screen in the params. Eg go to the products screen with the params {id: 123}. And then on the products screen you fetch a product by the id/123 in the params. This is mainly due to deep linking to the app, since the links can contain
/products/:id and not en entire product object. I had previously had the screens working by passing the same graphql Fragments within navigation, but with the deep linking concern I need to add support for the id in the params.
Where React Query comes in is that the screen may fetch other data from graphql beyond just the product, so Im curious if passing in just the product fragment to placeholderData from a previous screen would hydrate just the product query UI on the screen, or how thats handled? Furthermore, if I pass in just the id in the params, will React Query use the same product from cache with the same id on the previous screen to hydrate the product UI? It seems that when I pass in just the id, the component makes a request, but when fetching in the entire product object, it doesnt. Anyway, wanted to see if anyone had any advice for hows theyve passed data between screens in React Native/React Navigation and used React Query for data fetching.
Appreciate anyone's help on this, sorry for the mouth full....Best way to handle 2 queries (2 different endpoints) in a single view.
My view will have 2 different endpoints to call based on a call to action. I wanted to know what would be the best way to handle this? Would it be better to have something like (in the example I have used the placeholder api, but in my case it would be the same base url but different parameters e.g query1 endpoint: https://www.example.something/account and query2 endpoint: https://www.example.something/account/all/details.
The way I have thought to do it is have a boolean state value and use that in the enabled flag of the query: stackblitz example - https://stackblitz.com/edit/react-ts-fbny3g?file=index.tsx
Is there another way or better way to do this?...
input data not populated
So I have a form
```js
const [formData, setFormData] = useState({
age: '',
height: '',...
setQueryData with exact option
I would like to use
setQueryData with an option exact. For example I have a key 123 that can have multiple variants 123-A, 123-B etc. and I would like to update all keys that contain 123. Is that in any way possible?How to handle error in react-query's onSuccess event?
I want to fire a function in onSuccess event but this function can failed. What is the best to handle this?
cron job refetch
Is there a way to refetch at a certain point in the day? For example if I know data is updated every hour at 1 minute past and 31 minutes past then I want to fetch at these given times.