如何在阿波罗客户端中将突变链接在一起

Posted 2023-03-08

【中文标题】如何在阿波罗客户端中将突变链接在一起

【英文标题】：How to chain together Mutations in apollo client

【发布时间】：2019-01-13 23:35:21

【问题描述】：

我的状态中存储了一堆信息，我需要使用突变将这些信息传递给我的 graphQL 服务器，但我需要在调用下一个突变之前使用每个突变的结果，因为我需要：

在我的数据库中创建一个新对象 使用为该对象生成的 id 创建另一个对象 修改原对象，存放第二个对象生成的id

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

【问题讨论】：

您对服务器有任何控制权吗？您可以更改 API 吗？

【参考方案1】：

正如您所提到的，解决它的唯一方法是批量处理所有突变，请查看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>
)

如果您遇到问题，请告诉我！

【讨论】：

@CarlosRufo ，Mutation 组件不需要 children 道具吗？这要怎么处理？

@CarlosRudo ，另外，我如何访问 Mutation 组件传递给其渲染函数的错误、加载等道具

【参考方案2】：

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

onCompleted 和 onError 属性可以在你的情况下使用，它们也可以访问新的数据结果。但我个人认为嵌套格式更易读，以后也更容易调试。

应该是这样的：

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

【讨论】：

感谢您的回复，但我认为在格式和可读性方面我更喜欢 Carlos 的回答。