如何在React Apollo Client中处理存在依赖关系的多个GraphQL异步Mutation？

Great question! This is such a common scenario when working with chained operations, and Apollo Client plays nicely with the async/await pattern you’re already familiar with from REST. Here’s how to replicate that sequential flow smoothly:

1. Async/Await with mutate Functions (Most Intuitive) #

The simplest approach mirrors your REST code almost exactly—you’ll use async/await directly with the mutate functions returned by useMutation.

Step-by-Step Implementation: #

First, define each of your GraphQL mutations using useMutation:

import { useMutation, gql } from '@apollo/client';

// Define your mutations
const MUTATION_1 = gql`
  mutation Mutation1($input: Mutation1Input!) {
    mutation1(input: $input) {
      id1
      # Include any other fields you need from the response
    }
  }
`;

const MUTATION_2 = gql`
  mutation Mutation2($id1: ID!, $otherVariable: String!) {
    mutation2(id1: $id1, otherVariable: $otherVariable) {
      id2
      # Other response fields
    }
  }
`;

const MUTATION_3 = gql`
  mutation Mutation3($id2: ID!) {
    mutation3(id2: $id2) {
      # Fields from the final mutation response
    }
  }
`;

Then, in your component, create an async function to run the mutations sequentially:

function ChainedMutationsComponent() {
  const [mutate1] = useMutation(MUTATION_1);
  const [mutate2] = useMutation(MUTATION_2);
  const [mutate3] = useMutation(MUTATION_3);

  const executeChainedMutations = async () => {
    try {
      // Run first mutation and extract id1
      const { data: data1 } = await mutate1({
        variables: { input: { /* Your Mutation1 input variables */ } }
      });
      const id1 = data1.mutation1.id1;

      // Run second mutation using id1 + other variables
      const { data: data2 } = await mutate2({
        variables: { id1, otherVariable: "your-other-value" }
      });
      const id2 = data2.mutation2.id2;

      // Run third mutation with id2
      await mutate3({
        variables: { id2 }
      });

      console.log("All mutations completed successfully!");
      // Add post-success logic here (e.g., show toast, redirect)
    } catch (error) {
      console.error("Chained mutation failed:", error);
      // Handle errors (e.g., reset form, show error message)
    }
  };

  return (
    <button onClick={executeChainedMutations}>
      Run Sequential Mutations
    </button>
  );
}

2. Alternative: Promise Chaining #

If you prefer promise syntax over async/await, you can chain the mutate calls directly:

const executeChainedMutations = () => {
  mutate1({ variables: { input: { /* ... */ } } })
    .then(({ data: data1 }) => {
      const id1 = data1.mutation1.id1;
      return mutate2({ variables: { id1, otherVariable: "your-value" } });
    })
    .then(({ data: data2 }) => {
      const id2 = data2.mutation2.id2;
      return mutate3({ variables: { id2 } });
    })
    .then(() => console.log("All mutations done!"))
    .catch(err => console.error("Mutation chain failed:", err));
};

Key Notes: #

• Error Handling: Just like in REST, wrapping the sequence in try/catch (or using .catch() for promises) ensures any failure stops execution and lets you handle errors gracefully.
• Loading States: If you need to show loading indicators, you can track a component-level loading state with useState, or use the loading value returned by each useMutation hook.
• Optimistic UI: You can still add optimisticResponse to each mutation’s config to update the UI immediately before the server responds—this works seamlessly with sequential calls.

内容的提问来源于stack exchange，提问作者Suraj Ingle