Multiple API requests

[danthedeckie]

So we have a RTK Query API set up, it works great.

We have one instance where when the user clicks a button it needs to:

• Send data to 2 different endpoints
• Wait for response data
• Send data to another endpoint using details from the first 2 responses
• When that comes back, redirect to another URL (using react router).

The way I implemented this initially is all done within a single react component

function GoButton(props) {
    const [createThingA, createThingAResults] = ourApi.endpoints.thingACreate.useMutation();
    const [createThingB, createThingBResults] = ourApi.endpoints.thingBCreate.useMutation();
    const [createThingC, createThingCResults] = ourApi.endpoints.thingCCreate.useMutation();

    function onClick() {
        createThingA(props.thingADetails);
        createThingB(props.thingBDetails);
    }
    if (createThingAResults.isSuccess && createThingBResults.isSuccess) {
        createThingC(createThingAResults.data.id, createThingBResults.data.id);
    }
    if (createThingCResults.isSuccess) {
        navigate(`/url/${thingCResults.data.id/`);
    }
    return <button onClick={onClick}>Go!</button>;
}

kind of thing (with error checking, loading spinner, etc.

Is this a sensible way to work? In some ways it feels kind of elegant, in other ways kind of horrific.

Would it be better to write a custom queryFn that wraps all of that inside a single mutation query?

If so, is there an easy way I can use the query / mutation details set up in the thingACreate, thingBCreate & thingCCreate mutations (headers, auth, etc etc) without being hacky? The examples in the docs show how I can use multiple non-redux-query async thing (axios / fetch / etc)? But how can I do this "the right redux toolkit query way"?

Am I missing something obvious? What kinds of sneaky bugs are lurking in this type of thing that I've not thought about?

[markerikson]

Seems like that would work better with standard async logic:

async function onClick() {
  const [resultA, resultB] = await Promise.all([
    createThingA(props.thingADetails).unwrap(),
    createThingB(props.thingBDetails).unwrap()
  ])
  
  // both must have succeeded
  const resultC = await createThingC(resultA.data.id, resultB.data.id).unwrap();
  navigate(`/url/${resultC.data.id/`);
}

[danthedeckie]

Thank you!

That is a lot simpler... Somehow I missed the concept of doing that and went for the complicated solution first. 🙄

[markerikson]

No worries :) sometimes it can be hard to flip the mental approach back and forth between declarative and imperative.