RTK query: Correct 'await' technique for multiple api requests
See original GitHub issueHi, I have a question in relation to a use-case I need to port to RTK Query and the best approach to do this…
Currently we have a mechanism as follows which obtains 2 network resources, merges the data from both and loads into redux state - we do something as follows in an async action…
Promise.all([fetch('url1'), fetch('url2']).then((r1,r2) => {
//filter and extract data from r1 and r2 to produce stateData
const stateData = r1.json() + r2.json();
store.dispatch(stateDataRx(stateData));
})
Having read the docs I have seen that this could be achieved in 3 ways
- createAsyncThunk - use this to create an action which wraps 2 dispatches of initiate to the rtk middleware
- use selectors to derive the ‘stateData’ from the network cached data of the 2 network calls when the rendering occurs
- use a custom queryFn to incorporate the multiple api calls into 1 cached resource
For me all 3 approaches of these have an issue that the original code does not
- createAsyncThunk approach will mean that we cache the network response and cache a derived state object - so too much is cached
- Use selectors approach has the downside (I think) that it is impossible to know if the data is well formed by the time the rendering occurs - I believe that for instance if the cache is invalidated by mutation then how is it possible to know that both network requests have finalised before a state-change->re-render occurs - I could lose the integrity of the data caches as there is no ‘await’ blocking the state change for any pending network request
- Custom queryFn - has 3 distinct issues
- means that we could be pushing business logic down into the api layer
- unsure as to whether we can reference existing endpoints inside a custom queryFn - if so how is this possible pls
- not openapi codegen friendly
So my question is - what is the recommended approach to facilitate the simple use-case (code snippet) above in your opinion?
Just to add we are not using the react hooks api for our RTK query integration so if possible please could the any response take this into account.
Thanks in advance
Issue Analytics
- State:
- Created 2 years ago
- Comments:7 (3 by maintainers)
Top Results From Across the Web
How to implement multiple api call in a single query with RTK ...
Scenario: I have to merge the results from two API calls: the first API call is a private API call while the second...
Read more >Redux Essentials, Part 8: RTK Query Advanced Patterns
RTK Query allows multiple components to subscribe to the same data, and will ensure that each unique set of data is only fetched...
Read more >RTK Query Best Practices - Medium
The main method of refreshing data with RTKQ is using Cache Tags. It's most helpful when dealing with resources that have both query...
Read more >[RTK Query] How to fire multiple mutations in parallel and wait ...
Hey guys, I'm using RTK Query in my project and came across this use case where I have to make multiple API calls...
Read more >Creating React Apps With Redux Toolkit and RTK Query - Toptal
RTK Query ideology dictates that all the API definitions appear in one place, which is handy when dealing with enterprise-level applications ...
Read more >
Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free
Top Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
The distinction here is probably: do you need those two apis indivdually?
If you do not need them individually, baseQuery is what we recommend in this example. That essentially creates one new endpoint out of them.
If you just have one endpoint depending on another, just call them in succession:
right, so it seems like that’s the way I need to go with considering my requirements,
I really hope I will keep using RTK, love the way one creates endpoint, hooks gets generated automatically and it’s all connected with Redux ❤️
thank you @phryneas