如何使用 Apollo Client 进行批量变异

Question

我尝试将 ApolloClient 2.1 与新的 Mutation 组件一起使用。

简单的用例正在起作用，但现在我有一些更复杂的东西。

我想要实现的是查询数据并将它们放入列表中，然后对这个列表进行排序（这里是通过 react-sortable-hoc），一旦排序，我想更新列表中所有元素的新位置。

所以基础是这样的，它适用于简单的查询：

const query = gql`
{
  items( order:{by:"position", direction:"desc"}) {
    id
    name
    position
  }
}`

const ItemView extends Component {
    onSortEnd = ({ oldIndex, newIndex }) => {
       console.log("Sort ended: ", oldIndex, newIndex);
    }

    render() {
     <Query query={query}>
        {({ loading, data, error }) => {
          if (loading) return <p>Loading...</p>;
          if (error) return <p>Error</p>;

          return (
            <ItemList items={data.items} onSortEnd={this.onSortEnd} />
          )
        }}
      </Query>
    }
}

现在我真的在很多地方挣扎，以便进行突变。

我想我需要包装 Mutation 组件。 但是我怎样才能在那里提供一个 GraphQL 查询，因为我想通过多次触发类似的查询来进行批量突变，例如

mutation {
  updateItem1: updateItem(id: 457092155, input: {position: 1}) {
    item {
      id
    }
    ok 
    errors

  },
  updateItem2: updateItem(id: 54489270, input: {position: 2}) {
    item {
      id
    }
    ok 
    errors

  },
  ... // much more mutations, one for each item in the list
}

所以我的主要问题是，如何将具有动态突变量的 GraphQL 突变传递给 Mutation 组件？ 或者我应该完全不同地做这件事？

非常感谢您的任何提示

Answer 1

为了实现这一点，您必须将多个 Mutation 组合在一起。 您可以为此使用react-adopt 。 他们甚至在这里https://github.com/pedronauck/react-adopt#leading-with-multiple-params解决了这个问题。

你也可以看看这里的讨论https://github.com/apollographql/react-apollo/issues/1867和jasonpaulos有一个例子用钩子演示这一点

嗨，大家好！ 我相信新的 Apollo 钩子 useQuery、useMutation 和 useSubscription 足以解决这个用例。 为了证明这一点，我已经转换了@Cridda 使用 react-adopt 的示例，并将其修改为在此处使用 @apollo/react-hooks： https : //codesandbox.io/s/apollo-and-react-hooks-4vril

这个例子绝不是完美的，但它演示了钩子如何大规模简化一些用例。

希望这可以帮助！

Answer 2

我在这里给出了有关Apollo Client原始基于Promise的API的答案，对于在特定点（例如在回调函数中）执行迭代突变，可能更易于处理。 如果您具有ID和相应的位置，则可以异步遍历数据并在每个元素上执行突变。

Answer 3

正如 Hemant 已经提到的，Apollo 2.1 中的 @compose 注释是解决这个问题的“正确”/传统方法。 如果出于某种原因这对您不起作用，则可能有另一种更粗略/黑客的方法来实现此目的：

如果您的Item模型有一个父模型，您可以通过将子项作为数组值传递给connect / create / update操作来使用一个突变来改变多个节点。

不幸的是，这里的限制是无法单独识别要更新的子节点。 我的意思是，你可以过滤子Items中发生突变根据标准（如postition = 2），但只允许你变异经过滤项，以相同的状态; 您将无法以这种方式以不同方式更新它们。

如果我们允许自己更粗略的一步，您可以在调用更新突变之前删除您希望更新的 Item 节点 - 这将允许您使用create: key 下的所有更新项调用突变，其中将允许您指定要创建的每个项目。 这样，您可以创建的项目数量仅受请求负载大小的限制。

在很多情况下，删除和创建节点是不可接受的（而不是更新它们）……如果您使用此方法，请确保以这种方式删除项目数据不会对您的用例产生负面影响。