Fetch Data Conditionally

[arslanalidev]

I am using the same component for two routes. Now I want to trying the fetch the data through react query with specific route. I had enabled it conditionally with enabled flag in react query options. After that when I go the other route but same using the same component it's still fetching the data. Now I had the question how we can achieve this functionality. Means on specific route it should be disabled and when we go to other route it should re-enable it.

[TkDodo]

stale queries get re-fetched in the background when a new subscriber mounts. set a staleTime and the data will only come out of the cache for that period of time.

[arslanalidev]

But I want to configure it like on the base of route not on the base of time. Then what should I try?
When route change it should fetch the data or stop fetching the data.

[TkDodo]

I don't quite understand the use-case. Shouldn't the component work in isolation, no matter where it is rendered? What if you go to the second route without being on the first route first? if you disable the query and have no data in the cache, you won't see anything.

you can also set refetchOnMount to false to stop refetches when a new observer mounts. That way, if you have data in the cache when you mount a new route, the cached data will be taken.

[arslanalidev]

Let me explain the use case in detail.
I want to use the same form for the create pharmacy and edit pharmacy.
Now What I had done that I had created the separate routes and passed the same component of pharmacy to both of the routes.
After that I want this functionality. When we are on the create pharmacy route the react query should not work. but when we are on the edit pharmacy react query should fetch the existed data.

I had tried using the enabled property true when user is on the edit pharmacy route. But after that When I goes to the create pharmacy route it's still fetching the data of the pharmacy. May be due to caching. That's why I was wondering how we can achieve this solution.

[TkDodo]

okay got it. If a query is disabled, it will not fetch. maybe you will get data from the cache, but there shouldn't be a network request going out. since you know the route you're on, you can just ignore data returned from react-query when you're on the create route.

personally, I wouldn't mix those, but rather have like multiple components:

• a PharmacyForm that takes some optional initialState
• PharmacyCreate which just creates a PharmacyForm with empty initialState
• PharmacyEdit which does the query, shows a loading spinner, and then passes the data from react-query down to PharmacyForm as initialState

that way, you'll still have shared most of the form logic, but doing the query is only on the edit route. Hope that makes sense :)

[arslanalidev]

Yeah, I was also thinking about this solution. Because It's most viable rather than implementing the all logic at one place.
Thank you So much