求助：Apollo Client useMutation未调用GraphQL API问题

核心问题 #

useMutation是React Hook，必须严格遵循Hook使用规则：只能在React函数组件的顶层，或者自定义Hook的顶层调用，不能在普通异步函数、循环、条件语句内部调用。你当前把它放在普通async函数bulkImport里，违反了规则，导致Hook无法正常初始化，自然不会发起请求。

而你之前用的mutate是Apollo Client实例的直接API方法，它不依赖React Hook规则，所以可以在普通函数里正常调用。

正确实现方式 #

方式1：封装为自定义Hook #

把批量导入逻辑封装成自定义Hook，这样就能合法调用useMutation：

import { useMutation } from '@apollo/client';
import { postBulkImportRequest } from './your-graphql-queries'; // 替换为你的查询路径

export function useBulkImport() {
  const [triggerMutation, { loading, error }] = useMutation(postBulkImportRequest);

  const bulkImport = async (importRequest: BulkImportRequest): Promise<string | undefined> => {
    const response = await triggerMutation({ variables: importRequest });
    return response.data?.postBulkImportRequest?.requestId;
  };

  return { bulkImport, loading, error };
}

在组件中使用自定义Hook #

import { useBulkImport } from './useBulkImport';

function ImportComponent() {
  const { bulkImport, loading, error } = useBulkImport();

  const handleImport = async (importData: BulkImportRequest) => {
    try {
      const requestId = await bulkImport(importData);
      // 拿到requestId后做后续处理
      console.log('导入请求ID:', requestId);
    } catch (err) {
      console.error('导入失败:', err);
    }
  };

  return (
    <div>
      <button onClick={() => handleImport(yourImportData)} disabled={loading}>
        {loading ? '导入中...' : '批量导入'}
      </button>
      {error && <p className="error">导入出错：{error.message}</p>}
    </div>
  );
}

方式2：直接在组件内部使用useMutation #

如果不需要复用逻辑，也可以直接在组件顶层调用useMutation：

import { useMutation } from '@apollo/client';
import { postBulkImportRequest } from './your-graphql-queries';

function ImportComponent() {
  const [postBulkImport, { loading, error }] = useMutation(postBulkImportRequest);

  const handleImport = async (importData: BulkImportRequest) => {
    try {
      const response = await postBulkImport({ variables: importData });
      const requestId = response.data?.postBulkImportRequest?.requestId;
      // 处理requestId
    } catch (err) {
      console.error('导入失败:', err);
    }
  };

  return (
    <button onClick={() => handleImport(yourImportData)} disabled={loading}>
      {loading ? '导入中...' : '批量导入'}
    </button>
  );
}

额外注意点 #

• 调用postBulkImport时返回的Promise会包含完整的mutation响应，直接从返回值中取data比依赖useMutation返回的data状态更可靠（状态更新是异步的）。
• 记得处理loading和error状态，提升用户体验。

内容的提问来源于stack exchange，提问作者Samira Arabgol