When to use fetchQuery?

[coltanium13]

Hey @TkDodo ! I was hoping to get some advice from you.

I generally never use fetchQuery, but i find myself needing to use it i think. However, im apprehensive because i cant find anything referencing when to use fetchQuery, other than a few cases with react router and your one post on stack overflow.

I have provider that uses a custom hook that basically listens for an event to happen globally. At first i just used useQuery for several hooks, and disabled them until the particular event occurred, and changed enabled to true to fire off the query. At the same time, a useEffect would be there and run when the query results come back, and then make the decisions based on that.

However, it seems really messy/weird with all the disabled queries, and useEffect that triggers the decision making on where to history.push based on the query that fired. Im not rendering anything where these useQuery hooks are used, just need to get data. It's a hook that needs to run logic when a global event happens more or less. Then, i route to a new page based on logic. (scan this thing, then go to that page).

if i use fetchQuery, i can just have a function that is called when the global event happens, then fire off the correct fetchQuery api based on the global event that happened. No useEffect or always having disabled queries in the app until the event occurs(possibly 4 different useQuery hooks waiting to be enabled).

Tldr; When is using fetchQuery acceptable? Is using it in a custom hook a fine solution? Or is it best to disable the useQuery and re enable it then run the logic in a useEffect after the data comes back?

[TkDodo]

you can’t use fetchQuery inside the render function of a component because it violates the rules of react that render functions must be pure.

[TkDodo]

unless it’s inside a useEffect, it’s still “inside the render function”

[coltanium13]

Ok that makes sense.

I do have another question though. In the react article, Keeping Components Pure, it says where you can use side effects is in the use effect, where it calls it after the rendering.

Not saying I would use the fetchQuery there, but can you elaborate on why using it here is not allowed, even though other data fetching or side effects can? I'm just trying to understand.

Thank you!

[TkDodo]

I said that it can be used in useEffect

[coltanium13]

I said that it can be used in useEffect

ohh, sorry, i misunderstood what you meant.

thank you so much for your help with this, Im always learning something :)