Question

我正在使用react-apollo@2.5.6

我有一个组件，当您单击它时，它将基于“选择”状态并发出add或remove操作。

目前，我正在这样做，目的是向组件注入2个突变功能。那是正确的方法吗？我能只使用一个突变（HOC）而不是多个吗？

    <Mutation mutation={ADD_STUFF}>
      {(addStuff) => (
        <Mutation mutation={REMOVE_STUFF}>
          {(removeStuff) => {

然后在包装好的组件中，我将做类似的事情

                        onClick={(e) => {
                          e.preventDefault()

                          const input = {
                            variables: {
                              userId: user.id,
                              stuffId: stuff.id,
                            },
                          }

                          // Based on selected state, I will call either add or remove
                          if (isSelected) {
                            removeStuff(input)
                          } else {
                            addStuff(input)
                          }
                        }}

谢谢

Answer 1

一切皆有可能，但通常会花费时间和金钱;）...在这种情况下，简单，易读，可管理。

第一个解决方案

常见突变，例如使用SELECT TOP 3参数命名为“更改”。

当然需要更改API-您需要一个新的解析器。

第二个解决方案

使用changeType可以从字符串构造任何查询。从this answer中获得启发-采用'经典graphql HOC'模式。

此解决方案不需要更改API。

Answer 2

我认为使用两个不同的Mutation组件没有任何意义。如果我理解正确，有两种方法可以解决您的问题。

使用Apollo客户端client.mutate函数根据状态进行手动更改，并根据新状态设置mutation和variables属性。要访问当前组件中的客户端，您需要将客户端从创建它的父组件传递到发生突变的子组件。
在组件的Mutation方法内使用单个render组件，并根据mutation变量设置variables和state属性。

Answer 3

您正在使用的方法如您所说的那样有效，但是对我来说，您似乎正在根据isSelected输入向UI委派一些逻辑，这些逻辑应由基础服务处理。

我认为您应该为ADD_STUFF和REMOVE_STUFF创建一个突变，我将创建ADD_OR_REMOVE_STUFF突变，然后选择解析器上的添加或删除行为。

具有一个突变更易于维护/扩展/理解，如果逻辑中除了添加/删除以外还需要其他操作，例如，如果您必须选择添加/删除/更新/验证/转换，您是否会嵌套5个突变？

在以前的情况下，单个突变可以命名为MULTI_HANDLE_STUFF，并且只有从UI调用的那个突变。

反应阿波罗-多个突变

3 个答案:

第一个解决方案

第二个解决方案