Next.js 15搭建GraphQL服务器报错求助：多方案尝试无果

以下是针对你问题的具体排查和解决方案：

1. 校验API路由的响应格式 #

确保src/app/api/gql/route.ts（或.js）严格遵循GraphQL规范返回响应，核心是用graphql库的execute方法处理查询，并设置正确的响应头：

import { execute, parse } from 'graphql';
import { schema } from './schema';
import { resolvers } from './resolvers';

export async function POST(request: Request) {
  const { query, variables } = await request.json();
  const result = await execute({
    schema,
    document: parse(query),
    rootValue: resolvers,
    variableValues: variables,
  });
  return new Response(JSON.stringify(result), {
    headers: { 'Content-Type': 'application/json' },
  });
}

注意：不要额外包裹execute返回的结果，直接返回原始的GraphQL响应结构。

2. 修正Apollo Client的客户端配置 #

在Next.js 15的App Router中，必须确保ApolloProvider正确包裹组件树，且客户端实例指向本地API路由：

• 新建src/app/providers.tsx：

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

const client = new ApolloClient({
  uri: '/api/gql',
  cache: new InMemoryCache(),
});

export function ApolloWrapper({ children }: { children: React.ReactNode }) {
  return <ApolloProvider client={client}>{children}</ApolloProvider>;
}

• 在src/app/layout.tsx中引入并使用该Provider：

import { ApolloWrapper } from './providers';

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

关键：必须标记ApolloWrapper为'use client'，因为Apollo Client属于客户端依赖。

3. 检查Schema与Resolver的匹配性 #

确保Schema定义的字段、参数和Resolver完全一致，包括大小写、类型：

• 示例Schema：

type User {
  id: ID!
  name: String!
}

type Query {
  getUser(id: ID!): User
}

• 对应Resolver：

const resolvers = {
  Query: {
    getUser: (_, { id }) => {
      // 模拟数据返回
      return { id, name: `User ${id}` };
    },
  },
};

可以提前用validateSchema校验Schema合法性：

import { validateSchema } from 'graphql';
import { schema } from './schema';

const errors = validateSchema(schema);
if (errors.length) console.error('Schema校验错误:', errors);

4. 验证客户端查询语句 #

确保useQuery的查询语句完全符合本地Schema定义：

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

const GET_USER = gql`
  query GetUser($id: ID!) {
    getUser(id: $id) {
      id
      name
    }
  }
`;

export default function UserPage() {
  const { data, error } = useQuery(GET_USER, { variables: { id: '1' } });
  if (error) return <div>错误：{error.message}</div>;
  return <div>用户：{data?.getUser?.name}</div>;
}

5. 调试API路由的请求响应 #

在API路由中添加日志，直接用curl或Postman测试接口：

• 路由中添加日志：

export async function POST(request: Request) {
  const body = await request.json();
  console.log('接收的查询:', body.query);
  const result = await execute({ /* ... */ });
  console.log('返回的结果:', result);
  return new Response(JSON.stringify(result), { /* ... */ });
}

• 用curl测试：

curl -X POST http://localhost:3000/api/gql \
  -H "Content-Type: application/json" \
  -d '{"query": "query GetUser($id: ID!) { getUser(id: \"1\") { id name } }", "variables": {"id": "1"}}'

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