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