如何为useMutation传入不同的Apollo Client？

• 核心错误：你之前把client放到variables里是完全错误的，variables是传递给GraphQL突变的业务参数，和客户端实例无关。useMutation指定自定义客户端的正确方式是在hook调用阶段的配置项里传递，而非调用突变函数时。

• 正确实现步骤：

  1. 预先创建好多个不同URI的Apollo Client实例，比如：

     // apolloClients.js
     import { ApolloClient, InMemoryCache } from '@apollo/client';
     
     // 默认客户端（和ApolloProvider一致）
     export const defaultClient = new ApolloClient({
       uri: 'https://default-api.example.com/graphql',
       cache: new InMemoryCache()
     });
     
     // 自定义URI的客户端
     export const customClient = new ApolloClient({
       uri: 'https://custom-api.example.com/graphql',
       cache: new InMemoryCache()
     });
     

  2. 在组件中使用useMutation时，直接在hook的第二个参数options里指定目标客户端：

     import { useMutation } from '@apollo/client';
     import { MY_MUTATION } from './graphql/mutations';
     import { customClient } from './apolloClients';
     
     function MyComponent() {
       // 关键：在useMutation的配置中传入client
       const [runCustomMutation] = useMutation(MY_MUTATION, { client: customClient });
     
       const handleClick = async () => {
         try {
           const response = await runCustomMutation({
             variables: {
               // 这里放你的突变参数，比如id: 123, name: "test"
             }
           });
           console.log('突变结果:', response.data);
         } catch (err) {
           console.error('突变失败:', err);
         }
       };
     
       return <button onClick={handleClick}>执行自定义客户端突变</button>;
     }
     

• 排查要点：

  • 确认自定义Client的uri配置正确，没有拼写错误
  • 检查@apollo/client版本是否在v3.x及以上（v3开始稳定支持useMutation的client参数）
  • 确保没有在ApolloProvider的上下文覆盖这个配置，useMutation的options优先级高于上下文客户端

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