Question

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

简单的用例正在运行，但现在我有了更复杂的东西。

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

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

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

`

const ItemView扩展了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

您必须将多个Mutations组合在一起才能实现此目的。您可以为此使用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

正如Hemant已经提到的那样，Apollo 2.1中的@compose注释是解决此问题的“正确” /常规方法。如果由于某种原因这对您不起作用，则可能还有另一种更粗暴/骇人的方式来完成此任务：

如果您的Item模型具有父模型，则可以通过将子代作为数组值传递到connect / create / {{1 }}操作。

这里不幸的限制是无法单独识别要更新的子节点。我的意思是，您可以根据某个条件（例如update = 2）对要过滤的子项Items进行过滤，但这只会使您将过滤后的项目突变为相同的状态；您将无法通过这种方式彼此进行不同的更新。

如果我们允许自己再执行一次粗略的步骤，则可以在调用更新突变之前删除要更新的Item节点-这将使您可以使用postition下的所有已更新项目来调用突变键入突变，这将允许您指定要创建的每个项目。这样，您可以创建的项目数仅受请求有效负载的大小限制。

在很多情况下，删除和创建节点是不可接受的（与更新节点相反）...如果您使用此方法，请确保从中删除项目数据不会对用例造成负面影响这样。

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

2 个答案: