Re-running a query with different payloads/ variables

[AlexMachin1997]

Hi everyone,

So on my current project I created a small hook something similar to this library. However, for my next project I'm wanting to replace my hook for "react-query" as it has most if not all the functionality I need.

So I can see useQuery have a "re-fetch" function, however I can see this will just re-run the query. What I want to achieve is to be able to re-run the query with a different payload.

I know if you change some state and it's a depedency of a query it will re-run, but if you update multiple pieces of state like page number and filters that will probably re-run the query twice which isn't ideal.

What I want to be able to do is pass some initial pieces of state as part of the queryFn for useQuery (This state won't be updated, it's just the initial payload for the request), but then as I interact with the ui I want to update some state like page numbers and filters and then manually re-run the query with a new payload.

Is what I want possible ? I couldn't find anything in the docs like this hence why I've written this post.

[TkDodo]

I know if you change some state and it's a depedency of a query it will re-run, but if you update multiple pieces of state like page number and filters that will probably re-run the query twice which isn't ideal.

react is pretty good at batching state updates from event callbacks already, and it will also get better in react 18 for async callbacks. If you have multiple pieces of state that update together, they should probably live together in the same state object. If you have different parts of your ui that update different parts of your state, then useReducer is a good way to manage that with event driven reducers. If that state needs to be globally available, zustand works very well and goes by the same principles.

I have a blog post on that topic here: https://tkdodo.eu/blog/use-state-vs-use-reducer

but then as I interact with the ui I want to update some state like page numbers and filters and then manually re-run the query with a new payload.

How does the user update the page number and some filters at the same time? Correct me if I'm wrong, but it sounds to me like you have some kind of filter form where the user can do some changes and then trigger a refetch when they click Apply or so?

A use case like that works very well if you move the State from the form up once apply is clicked, and then have the query only depend on that state. I personally like to put filters like that into the url and then subscribe to the url with useParams from react-router.

It's basically the same as saying: "please refetch with this data when I click that button", but in a declarative way.

[AlexMachin1997]

Yeah I was going to the useReducer hook, though I always felt it wasn't a good choice for some reason as state isn's available immediately especially with objects then again if there was cases for each sceanrio it would work fine as the state would set together. But I set this up a year ago when I was just starting to build huge UI's with React.

Yeah the filters and page number wasn't a very good example tbh. It is some kind of form based on available fields which you fill out and then in an onSubmit it geneates a new api payload and updates resets any state like the page number and last query.

I might be over thinking it a little, I guess If I was going to use "react-query" it would be easier to just use the useRedcuer and when that updates it would re-run the query instead of manually re-running. But then again what If I just wanted to re-run the query when I click a refresh button how would that work ? Just deep clone the object to force a state update.

[TkDodo]

Yeah the filters and page number wasn't a very good example tbh. It is some kind of form based on available fields which you fill out and then in an onSubmit it geneates a new api payload and updates resets any state like the page number and last query.

this is exactly the example I've given above: When you submit the form, you lift the state up and make your query depend on that.

I might be over thinking it a little, I guess If I was going to use "react-query" it would be easier to just use the useRedcuer and when that updates it would re-run the query instead of manually re-running.

it does exactly that. But if you don't want to run a query on intermediate states, you can't let react-query depend on those intermediate states.

But then again what If I just wanted to re-run the query when I click a refresh button how would that work ?

useQuery returns refetch, which is exactly for this use-case: To refetch with the same parameters. You can also call queryClient.refetchQueries(key)

Just deep clone the object to force a state update.

deep cloning wouldn't work because react-query uses stable serialization and not object equality :)

[AlexMachin1997]

Gotcha.

That makes sense, so if I did do something like this again the useReducer hook sounds like the way to go if the state is all related or I could have a form of "intermediate" state which only get's updated when I want to re-run the query ie on submit of a form.

Thank's for the explanations @TkDodo it makes more sense now. Based on what I know now I believe it would be eaiser than I thought. I'll have to give it a try in my next project 😉