reactjs - 如何使用 Apollo 客户端进行批量突变

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

现在，为了进行突变，我在很多方面都遇到了困难。

我想我需要包装突变组件。但是我怎样才能在那里提供 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 有一个使用钩子(Hook)演示这一点的示例

Hi everyone! I believe that the new Apollo hooks, useQuery, useMutation, and useSubscription, adequately address this use case. To demonstrate this, I have converted @Cridda's example that uses react-adopt and modified it to use @apollo/react-hooks here: https://codesandbox.io/s/apollo-and-react-hooks-4vril

This example is by no means perfect, but it serves as a demonstration of how hooks can massively simplify some use cases.

希望这有帮助!