Next.js13中@apollo/experimental-nextjs-app-support的Mutation使用问题

针对Query正常但Mutation无法调用的问题，以下是基于@apollo/experimental-nextjs-app-support在客户端组件和服务器组件中执行Mutation的具体方案：

客户端组件中使用Mutation #

客户端组件必须声明'use client'指令，才能使用Apollo的客户端钩子。具体步骤如下：

1. 组件顶部添加客户端组件标识
2. 导入useMutation和gql
3. 定义Mutation GraphQL语句
4. 调用useMutation并处理执行逻辑

示例代码：

'use client';

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

// 定义Mutation语句
const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
`;

export default function AddTodoForm() {
  // 初始化Mutation钩子
  const [addTodo, { data, loading, error }] = useMutation(ADD_TODO);

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    const inputText = (e.target as HTMLFormElement).elements.namedItem('text') as HTMLInputElement;
    if (inputText.value.trim()) {
      addTodo({ variables: { text: inputText.value.trim() } });
      inputText.value = '';
    }
  };

  if (loading) return <p>正在添加...</p>;
  if (error) return <p>错误：{error.message}</p>;

  return (
    <form onSubmit={handleSubmit}>
      <input name="text" placeholder="输入待办事项" />
      <button type="submit">添加</button>
      {data && <p>已添加：{data.addTodo.text}</p>}
    </form>
  );
}

服务器组件中执行Mutation #

服务器组件无法使用客户端钩子，需直接通过ApolloClient实例调用mutate方法执行操作：

1. 导入getApolloClient和gql
2. 获取ApolloClient实例
3. 调用mutate方法执行Mutation

示例代码：

import { getApolloClient } from '@apollo/experimental-nextjs-app-support/ssr';
import { gql } from '@apollo/client';

const ADD_TODO = gql`
  mutation AddTodo($text: String!) {
    addTodo(text: $text) {
      id
      text
    }
  }
`;

export default async function ServerAddTodo() {
  const client = getApolloClient();
  const result = await client.mutate({
    mutation: ADD_TODO,
    variables: { text: '服务器端添加的待办' },
  });

  return (
    <div>
      <h3>服务器端Mutation结果</h3>
      {result.data?.addTodo ? (
        <p>成功添加：{result.data.addTodo.text}</p>
      ) : (
        <p>添加失败</p>
      )}
    </div>
  );
}

关键配置检查 #

确保你的ApolloProvider使用的是@apollo/experimental-nextjs-app-support/ssr中的版本，而不是@apollo/client的Provider，这是适配App Router的核心：

// app/layout.tsx
import { ApolloProvider } from '@apollo/experimental-nextjs-app-support/ssr';
import { getApolloClient } from '@apollo/experimental-nextjs-app-support/ssr';

export default function RootLayout({ children }: { children: React.ReactNode }) {
  return (
    <html lang="zh-CN">
      <body>
        <ApolloProvider client={getApolloClient()}>{children}</ApolloProvider>
      </body>
    </html>
  );
}

注意事项 #

• 客户端组件必须加'use client'，否则无法使用useMutation等客户端钩子
• 服务器组件中的Mutation在服务器端执行，需注意权限校验，避免敏感操作泄露
• 确保@apollo/experimental-nextjs-app-support与@apollo/client版本保持一致，避免兼容性问题

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