如何在循环中完成第一个 GraphQL 突变后进行第二个 GraphQL 突变

Question

这里我有一个场景，其中我有一个数组，其中有一些项目要通过 GraphQL 突变添加到数据库中。

我正在循环发送那个突变，它工作正常。

但是当我检查我的数据库时，发生了一些不匹配的情况，假设我在数组中有 10 个项目，并且请求很快，所以只有 2 或 3 个项目被添加到数据库中。

我尝试的第一个解决方案是使用 Promise.all 但它不起作用。
我想到的第二件事是将当前索引发送到那个突变，在它成功之后它会 return 我一样 index 所以我根据那个发送另一个项目但是我我很困惑如何将 index 与 variables 一起发送，如果需要，但不知道它是否会 return 我是否相同。

我附上了一些代码片段以获得更多想法：

import { useMutation } from "@apollo/client";

// Req in loop
const updateDataInLoop = (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        updateReq({
          variables: {
            // API variables
          },
        });
      }
  };

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION, {
    onCompleted: (data) => {
      // after this I've to send another req
     },
  });

Answer 1

问题是您没有等待所有这些 GraphQL 变更。基本上，您一次发送多个请求，即使一个突变 returns 一个承诺，这反过来又转化为实际上在数据库中获得 updated/created 的一些产品。你应该这样做：

import { useMutation } from "@apollo/client";
// Req in loop
const updateDataInLoop = (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        updateCartMutation(variable)
      }
  };

//make an async mutation
const updateCartMutation=async (variable)=>await updateReq({
          variables: {
            // API variables
          },
        });

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION, {
    onCompleted: (data) => {
      // after this I've to send another req
     },
  });

Answer 2

经过一些令人头疼的操作，我终于找到了一个可行的解决方案。

// Req in loop
const updateDataInLoop = async (cartId, strapiId) => {
      for (let i = 1; i < items.length; i++) {
        try { 
         await updateReq({
           variables: {
             // API variables
           },
         });
         continue;
        } catch e {
          break;
        } 
      }
  };

// graphql api
const [updateReq] = useMutation(UPDATE_MUTATION);

如何在循环中完成第一个 GraphQL 突变后进行第二个 GraphQL 突变

How to make second GraphQL mutation after first one is completed in loop

reactjs

redux

graphql

redux-saga

graphql-mutation