How to chain together Mutations in apollo client

Question

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:

Create a new object in my database
Use the id generated for that object to create another object
Modify the original object to store the id generated by the second object

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

Do you have any control over the server? Is it possible for you to change the API? — Tal Z, Aug 07 '18 at 08:06

score 11 · Accepted Answer · answered Aug 07 '18 at 04:47

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!

@CarlosRufo , doesn't the Mutation component need a children prop? How would one handle this? — connected_user, Jul 09 '19 at 16:42
@CarlosRudo , also, how can I access the errors, loading, etc. props that the Mutation component passes to its render function — connected_user, Jul 09 '19 at 17:26

morinx · Answer 2 · 2018-08-07T20:56:59.393

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

Thank you for your response, but I think I prefer Carlos's answer in terms of formatting and readability. — Caleb Nelson, Aug 07 '18 at 22:07

How to chain together Mutations in apollo client

2 Answers2

Linked