RTK query: Correct 'await' technique for multiple api requests

See original GitHub issue

Hi, 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

  1. createAsyncThunk - use this to create an action which wraps 2 dispatches of initiate to the rtk middleware
  2. use selectors to derive the ‘stateData’ from the network cached data of the 2 network calls when the rendering occurs
  3. 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

  1. createAsyncThunk approach will mean that we cache the network response and cache a derived state object - so too much is cached
  2. 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
  3. 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:closed
  • Created 2 years ago
  • Comments:7 (3 by maintainers)

github_iconTop GitHub Comments

4reactions
phryneascommented, Feb 3, 2022

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:

const firstResult = useFirstQuery()
const secondResult = useSecondQuery(firstResult.isSuccess ? firstResult.data : skipToken)
// or
const secondResult = useSecondQuery(firstResult.data, { skip: !firstResult.isSuccess })
0reactions
jgwiazdowskicommented, Feb 3, 2022

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

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found