Is there a way in RTK query to "land" updates from different API calls

[steinarb]

One thing I do in redux-and-saga is to piggyback updated values on an HTTP POST to update a value.

It's not REST, strictly speaking. I.e. I don't return the object I'm updating.

Instead I usually return the parent of what I'm updating and "land" it in the same reducer as the data is fetched into with the regular HTTP GET. Then everything is automatically updated. E.g.

const butikkerReducer = createReducer(defaultState, builder => {
    builder
        .addCase(BUTIKKER_MOTTA, (state, action) => action.payload)
        .addCase(NYBUTIKK_LAGRET, (state, action) => action.payload)
        .addCase(BUTIKK_LAGRET, (state, action) => action.payload);
});

(BUTIKKER_MOTTA is the result of an HTTP GET for a list of stores, NYBUTIKK_LAGRET is the result of an HTTP POST to create a new store, and contains the complete list of stores, and BUTIKK_LAGRET is the result of an HTTP POST to update a store).

The resulting behaviour is quite nice, and, I think, feels quite naturatual.

Anyway: this is simple to do when the reducer results in a simple array (or object) on the top of the redux state.

Not so easy to put something into the reducer of an RTK query (and one probably shouldn't? Probably no end of contracts broken by doing this?)

But the question remains: is there a simple way in RTK query to achieve the same effect?

Failing that: is there a way for an update action to trigger a reload of a different query? (less network efficient since the data has already arrived in the react app, but the visual effect should be the same)

Thanks!

[steinarb]

Here is a similar question on stackoverflow: https://stackoverflow.com/questions/78994431/how-to-trigger-data-fetching-from-an-action-with-rtk-query

I have to admit none of the answers looked very attractive (for the same reasons the person posing the question didn't like them, probably...? "useEffect"...? The existence of "useEffect" is one reason I'm sticking with redux....).

There are actually two things I find myself missing:

1. The ability to land multiple HTTP calls' result in the same reducer
2. The ability for the successful completion of an HTTP call to trigger a new one (because I need data from the first call to have the information needed to do the second call) (probably the thing the stackoverflow OP needs...?)

[steinarb]

This has promise, maybe...? https://www.reddit.com/r/reactjs/comments/ruekqt/comment/hqylrjw/

The lazy query option looks complicated...

The conditional fetching sounds promising, but I couldn't figure out where conditional fetching was, in the example linked to...=

[phryneas]

I gotta be honest, I don't understand the question:
do you want to store the result of multiple independent http requests in a slice outside the RTK Query slice?

You can use extraReducers and matchers for that.

[phryneas]

For the extra reducers thing, see e.g. this example https://redux-toolkit.js.org/rtk-query/usage/examples#using-extrareducers

[steinarb]

Ah I was planning to pick out the isLoading from the first call and do the call to the second one inside an if-statment (not sure if calling hooks inside if-statements are allowed? Probably not...?).

But dependent queries looks way simpler. Will try it now. (may even be way simpler than the code it is replacing...?)

For the extra reducers thing: thanks! will look at it later! (first cut will be an as-simple-as-possible replacement of redux/axios/saga with RTK query (even if that will not give the exact same behaviour))

[steinarb]

Not able to get dependent queries to work: https://gist.github.com/steinarb/2405bf08514c8cb0304193112203716f#file-home-js-L18

The HTTP call from the useGetHandlingerQuery() hook is never called.

Is the destructuring I do, the problem?

Is the renaming of the values the problem?

Have I misspelled the argument? I've copy-pasted isFulfilled from the example in the comment.

[markerikson]

@steinarb there is no isFulfilled field in results. Looks like that comment was done while RTKQ was still in alpha, and we presumably removed that field name early on. (Note that using TS would have caught this error.)

The actual field names are here:

• https://redux.js.org/tutorials/essentials/part-7-rtk-query-basics#query-hook-result-objects

[steinarb]

Thanks! Using isSuccess instead of isFulfilled worked: https://gist.github.com/steinarb/1406fcb0c18c6ef673df4e39eebadadb#file-home-js-L18

[steinarb]

But the question remains: is there a simple way in RTK query to achieve the same effect?

Answering my own question here: the RTK query way to achieve the same effect is to use a mutation and then use either onQueryStarted or onCacheEntryAdded to either route the mutation POST's return value into a reducer or trigger a reload of the data using the GET query (I haven't figured out quite how and what yet. Need to figure out what "caches" and "tags" means in this context...?).

(I hadn't gotten to mutations when I started this thread. I started in one end replacing the initial GET operations that populate the app, and now I've come to the first operation that makes a change)

Side note to the RTK people: the JavaScript tab on the examples in the RTK documentation is currently non-functional. I don't know if this is intentional or not, but it makes it harder for people like me (JavaScript users) to use the docs. I would be very happy is this is fixed. 🙏

[markerikson]

@steinarb :

use either onQueryStarted or onCacheEntryAdded to either route the mutation POST's return value into a reducer

Note that you can listen to query-related actions in reducers without having to re-dispatch them:

• https://redux.js.org/tutorials/essentials/part-8-rtk-query-advanced#updating-toast-display

the JavaScript tab on the examples in the RTK documentation is currently non-functional

Yeah, known issue - we updated a lot of our build tooling for React 19 compat recently, but it also ended up breaking the client-side interactivity on the website. I've got a draft PR up to fix that and should hopefully have it addressed soon.

[steinarb]

Note that I haven't been able to use the above information to handle routing of return from updates yet, but this crateApi created matchers solved a different issue for me: #4778 (comment)

One thing I'm wondering: If a reducer uses a createApi created matcher to store the results of a query or a mutate, is useSelector() of that reducer's value in a component enough to trigger reloads of that value? Or do I still need to use the useBlahBlahQuery() hook to make the HTTP loading go?

[steinarb]

I'm expecting 888 as in the last entry of the table. There are two entries that haven't been updated: 777 and 888 in the table.

There is a redux action of type api/queries/cacheEntriesUpserted that changes the values of store.api.queries.getOversikt(undefined).status and store.api.queries.getOversikt(undefined).startedTimeStamp.

But store.api.queries.getOversikt(undefined).data is not updated with the new value (the value returned by the mutation).

[markerikson]

I think there's something I'm still not understanding about what your app is supposed to do and what you're expecting. Can you put together a minimal repro with this not working right?

[steinarb]

I was expecting (or hoping) store.api.queries.getOversikt(undefined).data to be updated with the data in payload.0.value in the api/queries/cacheEntriesUpserted action.

[markerikson]

That's what it should do, yes. But I don't know what that data was, because I can't see the rest of the action history, and I can't try out your app myself :)

If you could record a Replay and share it with me, I could at least see what the app is supposed to be doing and what actually happens, but right now all I'm getting from this description is "the data I expected didn't show up". I don't have enough info to understand the expected sequence here, so I can't tell you whether this is a bug in the library (which tbh is unlikely), a misunderstanding of how upsertQueryEntries works, or a timing issue.

[steinarb]

Hm... I could push the code of the change would that work?
Note: Branch isn't currently pushed (I'm waiting for a conformation before doing so)
(it would require java JVM >=17, maven and apache karaf to run)

Then

 git clone https://github.com/steinarb/handlereg.git
 cd handlereg
 mvn install

and then from the karaf command line

feature:repo-add mvn:no.priv.bang.handlereg/karaf/LATEST/xml/features
feature:install handlereg-with-derby
bundle:watch *

After this the app will be running on http://localhost:8181/handlereg/
Login with username/password: jad/1ad

(The simplest installation of apache karaf is to download the karaf binary zip, unpack it somewhere and start it with JAVA_HOME referring to a JVM installation https://karaf.apache.org/manual/latest/quick-start.html )

[steinarb]

Hm.... I'm running @reduxjs/toolkit 2.2.3 from April 2024 and react 18.2.0 from September (what?) 2022.

Some upgrades are probably in order, but what will break in redux-first-history...? (which is kinda fragile).

Not sure where to start upgrading, but I will try waiting with the new react major version and just try bumping @reduxjs/toolkit first (and if that breaks, bite the bullet and upgrade everything).

[steinarb]

Will have to look into merge callback on the endpoint merged with, maybe...?

https://redux-toolkit.js.org/rtk-query/api/created-api/api-slice-utils#patchquerydata

[steinarb]

@markerikson Just a clarification/explanation of what I'm currently doing and trying to do: 😄

1. I am transforming a small react/redux webapp from axios/saga to rtk query/rtk listener as a prototype for doing all of them
2. I have transformed the webapp piece by piece by starting in one saga and start switching it to RTK-query, looking at googled-up examples, rather than reading the docs and doing a thought-through transformation (because this is what works for me)
3. The transformation is complete in that it is working, with all traces of saga removed
4. But the transformed webapp currently uses providesTags on queries and invalidatesTags on mutations to reload data after mutations, and this is slightly inefficient
5. All POST endpoints are constructed so that they return updated data (I do a new JDBC connection and a new select before returning the data), and these returned data are currently thrown on the floor
6. So what i have been doing in this thread (and so far unsuccessfully) is to try to replace the query data with data returned by the mutation (total replacement, no patching, and pessimistic since I'm using the returned data)
7. Replacing query data with the results of the mutations, is the last piece I want to do before I call complete on the transformation, and start summarizing up what I've done and create a plan for the rest of the apps

As for what I am expecting of help by posting here, that's easy to answer: I am expecting nothing. 😄

It's just that when I am working on stuff I tend to mutter to myself when I am working, in whatever forum is available, because formulating things as questions and problems as text helps me fix the problem. I often see the solution as I'm typing a question, and then I end up sending the post anyway (since I've spent so much time typing it).

I am aware (because I have been told so earlier in other places), that is is something people may find annoying, so if it is, I will take my muttering to myself elsewhere. (with no offense taken 😄)

But please note that at least twice in this particular muttering your comments (and the comments of @EskiMojo14 ) have taken me out of a blind alley and/or restarted the conversion when I was ready to call complete. Thanks for that!

And if I go to muttering to myself I would like to post a final message when I figure out where I went wrong (which may be just forgetting to dot and i or stroke a t somewhere (metaphorically)), because I really hate it when I google up someone who as the exact problem and there is no solution to be found. So I try hard not to be that guy... 😄

(anyway: unless I hear nothing back I'll go back muttering to myself offline and just post the final solution here)

[steinarb]

Just on a side note: I have replacing-queries-with-mutation-returns working with updateQueryData now.

And I am replacing the entire current contents of the query results with the mutation returns anyway, so I'm not sure upsertQueryEntries higher efficiency matters...?

If and if it doesn't matter, I may round up the conversion here. 😄

[markerikson]

@steinarb : if it's just one entry at a time, there won't be a big difference. But I'm definitely still curious why upsertQueryEntries seems to not be working for you. Loosely put, upsertQueryData is a complete thunk cycle that dispatches both pending and fulfilled actions (and only for one entry at a time), whereas upsertQueryEntries is a single sync action that acts as a fulfilled actions for a whole batch of entries at once.

[steinarb]

The updateQueryData version has been merged to master, but I saved the failing upsertQueryEntries attempt and can push that branch if you're interested...? (it has lots of fixup commits)