如何在Next.js 13.2 App目录API路由中启动GraphQL服务器？

你的代码存在几个关键问题，导致Next.js 13.2 App Router下的GraphQL服务器无法启动：

1. 错误调用请求处理函数 #

startServerAndCreateNextHandler(server)返回的是一个请求处理函数，你需要传入当前的request对象并执行它，而不是直接返回这个函数本身。

2. 缺少POST方法支持 #

GraphQL的查询和突变请求通常使用POST方法，你的代码只导出了GET方法，会导致大部分GraphQL请求失败，同时也会影响Apollo Playground的正常使用。

3. TypeScript类型缺失（可选） #

如果使用TypeScript，Request类型需要从next/server导入，否则会出现类型错误。

修复后的代码 #

import { ApolloServer } from '@apollo/server';
import { startServerAndCreateNextHandler } from '@as-integrations/next';
import { Request } from 'next/server'; // 导入Request类型

const resolvers = {
  Query: {
    hello: () => 'world',
  },
};

const typeDefs = `#graphql
  type Query {
    hello: String
  }
`;

// 单例模式创建Apollo Server，避免重复初始化
const server = new ApolloServer({
  resolvers,
  typeDefs,
});

// 导出GET和POST方法
export async function GET(request: Request) {
  return startServerAndCreateNextHandler(server)(request);
}

export async function POST(request: Request) {
  return startServerAndCreateNextHandler(server)(request);
}

额外优化建议 #

• 保持Apollo Server实例为单例，避免每次请求都重新创建服务器实例，提升性能。
• 确认已安装所有必要依赖：@apollo/server、@as-integrations/next、graphql，TypeScript项目需补充@types/node等类型包。

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