CODEWITHSUNDEEP
reactjsgraphqlapolloreact-apolloapollo-client
Caleb Nelson
Caleb Nelson

Reputation: 103

How to chain together Mutations in apollo client

I have a bunch of information stored in my state that I need to pass to my graphQL server using mutations, but I need to use the results of each mutation before I call the next one since I need to:

I noticed that apollo Mutation components have an onCompleted callback, but I don't know how to use this callback to fire off another mutation or whether it's the right way solve my problem. I also looked into batching my mutations to send them all at once but it doesn't seem like that is the solution either. Any help would be appreciated

Upvotes: 9

Views: 6516

Answers (2)

morinx
morinx

Reputation: 635

All you need to do is nest these mutations depending on the data being passed.

The onCompleted and onError props can be used in your case, and they have access to the new data result too. But I personally think a nested format is more readable and easier to debug later.

It would be something like:

const Mutations = () => (
  <Mutation mutation={m1}>
    {(mutation1, { loading, error, data }) => (
       if (loading) return `Loading...`
       if (error) return `Error...`

       const id = get(data, 'result.id')

       return (
          <Mutation mutation={m2} variables={id} />
            {(mutation2, { loading, error, data }) => (

             if (loading) return `Loading...`
             if (error) return `Error...`

             (...)
            )}
          </Mutation>
     )}
  </Mutation>
)

Upvotes: 2

Carlos Rufo
Carlos Rufo

Reputation: 446

As you've mentioned, the unique way to solve it is batching all the mutations, check out the issue related!

Actually, it's not that bad to compose them, you could do something like this:

const handleClick = async (mutation1Fn, mutation2Fn, mutation3Fn) => {
  const data1 = await mutation1Fn()
  const data2 = await mutation2Fn()
  const data3 = await mutation3Fn()
}

const Mutations = () => (
  <Composer
    components={[
      <Mutation mutation={mutation1} />,
      <Mutation mutation={mutation2} />,
      <Mutation mutation={mutation3} />
    ]}
  >
    {([mutation1Fn, mutation2Fn, mutation3Fn]) => (
      <button
        onClick={() => handleClick(mutation1Fn, mutation2Fn, mutation3Fn)}
      >
        exec!
      </button>
    )}
  </Composer>
)

Let me know if you're struggling with something!

Upvotes: 11

Related Questions