如何将Apollo客户端中的突变链接在一起

时间:2018-08-07 00:31:55

标签: reactjs graphql apollo react-apollo apollo-client

我在状态中存储了一堆信息,我需要使用突变将其传递到我的graphQL服务器,但是我需要在调用下一个突变之前使用每个突变的结果,因为我需要:

  • 在我的数据库中创建一个新对象
  • 使用为该对象生成的ID创建另一个对象
  • 修改原始对象以存储第二个对象生成的ID

我注意到apollo Mutation组件具有onCompleted回调,但是我不知道如何使用此回调来触发另一个突变,或者这是否是解决我的问题的正确方法。我还研究了将突变进行批量处理以立即发送所有突变的方法,但这似乎也不是解决方案。任何帮助将不胜感激

2 个答案:

答案 0 :(得分:8)

您已经提到,解决该问题的独特方法是分批处理所有突变,请检查issue related

实际上,编写它们并不坏,您可以执行以下操作:

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

让我知道您是否在努力工作!

答案 1 :(得分:1)

您要做的就是根据传递的数据嵌套这些突变。

您可以使用onCompletedonError道具,它们也可以访问新的数据结果。但是我个人认为嵌套格式更易读,以后更容易调试。

那会是这样的:

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