如何使用 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 下的所有更新項調用突變，其中將允許您指定要創建的每個項目。 這樣，您可以創建的項目數量僅受請求負載大小的限制。

在很多情況下，刪除和創建節點是不可接受的（而不是更新它們）……如果您使用此方法，請確保以這種方式刪除項目數據不會對您的用例產生負面影響。