ApolloClient Mutation如何处理客户端多API调用的串联业务逻辑？

你完全没有误解Apollo Mutation的基础用法——默认情况下它确实是和服务端GraphQL Schema绑定，专注于服务端数据变更。但针对你描述的这种需要串联多步操作（客户端逻辑、服务端Mutation、第三方API调用）的场景，Apollo Client提供了几种灵活的解决方案，不用为每个步骤单独维护零散的UI状态：

1. 用Async/Await串联多步操作（最简方案） #

你可以把整个流程封装在一个异步函数里，结合useMutation返回的 mutate 函数，把服务端Mutation、第三方API调用、本地逻辑按顺序串联，只用一个全局的加载状态来控制UI。

举个具体的代码例子：

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

// 定义服务端Mutation：保存Facebook页面到数据库
const SAVE_FACEBOOK_PAGE = gql`
  mutation SaveFacebookPage($pageData: FacebookPageInput!) {
    saveFacebookPage(pageData: $pageData) {
      id
      name
    }
  }
`;

function FacebookAuthCallback() {
  const [savePage] = useMutation(SAVE_FACEBOOK_PAGE);
  const [flowStatus, setFlowStatus] = useState('loading'); // 整个流程的状态：loading/ready/error

  // 页面加载时执行整个流程
  useEffect(() => {
    const executeFlow = async () => {
      try {
        setFlowStatus('loading');
        
        // 步骤1：调用Facebook的me/accounts接口获取页面数据
        const fbResponse = await fetch('https://graph.facebook.com/me/accounts', {
          headers: { Authorization: `Bearer ${window.location.search.split('=')[1]}` }
        });
        const fbPages = await fbResponse.json();

        // 步骤2：调用服务端Mutation保存页面
        await savePage({ variables: { pageData: fbPages.data[0] } });

        // 步骤3：调用第三方API
        await fetch('https://third-party-api.com/setup', {
          method: 'POST',
          body: JSON.stringify({ pageId: fbPages.data[0].id })
        });

        // 流程完成，更新状态
        setFlowStatus('ready');
      } catch (error) {
        console.error('流程执行失败:', error);
        setFlowStatus('error');
      }
    };

    executeFlow();
  }, [savePage]);

  if (flowStatus === 'loading') return <div>加载中...</div>;
  if (flowStatus === 'error') return <div>加载失败，请重试</div>;

  // 流程完成后渲染页面
  return <div>你的Facebook页面已加载完成</div>;
}

2. 用Apollo本地状态管理统一控制流程 #

如果你的流程需要在多个组件间共享状态，可以用Apollo的ReactiveVar来维护全局的流程状态，这样不用在组件内部用useState，更适合复杂场景：

// 全局定义ReactiveVar
import { makeVar } from '@apollo/client';
export const fbAuthFlowStatusVar = makeVar('idle');

// 在组件中使用
import { useReactiveVar } from '@apollo/client';

function FacebookAuthCallback() {
  const [savePage] = useMutation(SAVE_FACEBOOK_PAGE);
  const flowStatus = useReactiveVar(fbAuthFlowStatusVar);

  useEffect(() => {
    const executeFlow = async () => {
      fbAuthFlowStatusVar('loading');
      // ... 同上的步骤1-3 ...
      fbAuthFlowStatusVar('ready');
    };
    executeFlow();
  }, [savePage]);

  // 渲染逻辑同上
}

3. 封装自定义本地Mutation（最优雅的复用方案） #

如果这个流程需要在多个地方复用，你可以定义一个客户端本地Mutation，把整个串联逻辑封装在Resolver里，组件只需要调用这一个Mutation即可，完全不用关心内部步骤：

第一步：定义客户端Schema和Resolver

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

// 定义客户端Schema
const typeDefs = gql`
  type Mutation {
    completeFacebookAuth: Boolean
  }
`;

// 定义服务端Mutation（复用之前的定义）
const SAVE_FACEBOOK_PAGE = gql`
  mutation SaveFacebookPage($pageData: FacebookPageInput!) {
    saveFacebookPage(pageData: $pageData) {
      id
      name
    }
  }
`;

// 定义客户端Resolver
const resolvers = {
  Mutation: {
    completeFacebookAuth: async (_root, _args, { client }) => {
      try {
        // 步骤1：获取Facebook页面
        const fbResponse = await fetch('https://graph.facebook.com/me/accounts', {
          headers: { Authorization: `Bearer ${window.location.search.split('=')[1]}` }
        });
        const fbPages = await fbResponse.json();

        // 步骤2：调用服务端Mutation
        await client.mutate({
          mutation: SAVE_FACEBOOK_PAGE,
          variables: { pageData: fbPages.data[0] }
        });

        // 步骤3：调用第三方API
        await fetch('https://third-party-api.com/setup', {
          method: 'POST',
          body: JSON.stringify({ pageId: fbPages.data[0].id })
        });

        return true;
      } catch (error) {
        console.error('流程失败:', error);
        return false;
      }
    }
  }
};

// 创建Apollo Client时加入typeDefs和resolvers
const client = new ApolloClient({
  uri: '/graphql',
  cache: new InMemoryCache(),
  typeDefs,
  resolvers
});

第二步：在组件中调用这个本地Mutation

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

const COMPLETE_FB_AUTH = gql`
  mutation CompleteFacebookAuth {
    completeFacebookAuth
  }
`;

function FacebookAuthCallback() {
  const [completeAuth, { loading, error }] = useMutation(COMPLETE_FB_AUTH);

  useEffect(() => {
    completeAuth();
  }, [completeAuth]);

  if (loading) return <div>加载中...</div>;
  if (error) return <div>加载失败</div>;

  return <div>流程完成！</div>;
}

总结一下：你不需要局限于“一个Mutation对应一个服务端操作”的思维，Apollo Client允许你把客户端逻辑、服务端Mutation、第三方API调用灵活组合，通过异步串联或本地Mutation封装的方式，用单一状态来控制整个流程的UI展示。

内容的提问来源于stack exchange，提问作者Uri Abramson