Next.js 13无工具包搭建GraphQL服务器遇405错误求解决

错误原因分析 #

• API路由未正确处理请求：api/graphql/route.js中的POST函数未接收req参数，且注释了请求体解构代码，导致query变量未定义，触发服务器内部错误；同时未处理浏览器可能发送的OPTIONS预检请求，直接返回405状态码。
• 客户端响应解析错误：app/login/page.js中response.json是方法，未加调用括号()，无法正确解析JSON响应。

Next.js 13搭建纯GraphQL服务器的最简方法 #

1. 定义GraphQL Schema与Resolver #

创建api/schema.js：

import { buildSchema } from 'graphql';

export default buildSchema(`
  type Query {
    hello: String
  }
`);

创建api/resolvers.js：

export default {
  hello: () => 'Hello from pure GraphQL!',
};

2. 实现API路由（兼容POST/OPTIONS） #

修改api/graphql/route.js：

import schema from "../schema";
import resolvers from "../resolvers";
import { graphql } from "graphql";
import { NextResponse } from "next/server";

// 处理OPTIONS预检请求，避免跨域/方法不允许错误
export async function OPTIONS() {
  return NextResponse.json({}, {
    headers: {
      'Access-Control-Allow-Origin': '*',
      'Access-Control-Allow-Methods': 'POST, OPTIONS',
      'Access-Control-Allow-Headers': 'Content-Type',
    },
  });
}

export async function POST(req) {
  try {
    const { query, variables = {} } = await req.json();
    const result = await graphql({
      schema,
      source: query,
      rootValue: resolvers,
      variableValues: variables,
    });
    return NextResponse.json(result);
  } catch (error) {
    return NextResponse.json({ errors: [{ message: error.message }] }, { status: 500 });
  }
}

3. 客户端调用修正 #

修改app/login/page.js：

'use client';
import { useEffect } from 'react';

export default function GraphQLAPI() {
  useEffect(() => {
    const handleRequest = async () => {
      try {
        const response = await fetch('/api/graphql', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({ query: '{ hello }' }),
        });

        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        
        const { data, errors } = await response.json();
        errors ? console.error('GraphQL错误:', errors) : console.log('返回数据:', data);
      } catch (err) {
        console.error('请求异常:', err);
      }
    };

    handleRequest();
  }, []);

  return <div>GraphQL API</div>;
}

4. 依赖验证 #

确保已安装graphql包（你的依赖列表中已包含，无需额外安装）。

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