错误：响应不成功：收到状态代码 405

Question

我在 Next.js （应用程序路由器）项目的 apollo 客户端\服务器中绕过 graphql 时遇到问题。终端说 '.. pp pi\graphql 中没有导出 HTTP 方法 oute.ts'。为每个 HTTP 方法导出命名导出。我对这些技术堆栈很陌生。还想知道目录是否正确。我在同一文件夹 app/api/graphql 下有以下所有 4 个文件

以下是代码

 ApolloClient.ts
    import { ApolloClient, HttpLink, InMemoryCache } from "@apollo/client";
    import { registerApolloClient } from "@apollo/experimental-nextjs-app-support/rsc";
    
    export const { getClient } = registerApolloClient(() => {
      return new ApolloClient({
        cache: new InMemoryCache(),
        link: new HttpLink({
          uri: "http://localhost:3000/api/graphql",
         
        }),
      });
    });

    typeDefs.ts
    import { ApolloServer } from "@apollo/server";
    import { gql } from "graphql-tag";
    
    const typeDefs = gql`
      type Query {
        hello: String
      }
    `;
    
    export default typeDefs;

    resolver.ts
    const resolvers = {
        Query: {
          hello: () => 'world',
        },
      };
      
      
      export default resolvers;

  graphql.ts  

    import { ApolloServer } from "@apollo/server";
    import typeDefs from './typeDefs';
    import resolvers from './resolvers';
    import { startServerAndCreateNextHandler } from "@as-integrations/next";   


      const graphql = new ApolloServer({
        resolvers,
        typeDefs
      });
  
     export default startServerAndCreateNextHandler(graphql);   

Here is the error it says on the browser   

Unhandled Runtime Error
Error: Response not successful: Received status code 405

Call Stack
new ApolloError
(rsc)\node_modules\@apollo\client\errors\index.js (39:0)
eval
(rsc)\node_modules\@apollo\client\core\QueryManager.js (777:37)
both
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (22:0)
eval
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (11:56)
new Promise
<anonymous>
Object.then
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (11:0)
Object.eval [as error]
(rsc)\node_modules\@apollo\client\utilities\observables\asyncMap.js (24:0)
notifySubscription
(rsc)\node_modules\zen-observable-ts\module.js (137:0)
onNotify
(rsc)\node_modules\zen-observable-ts\module.js (176:0)
SubscriptionObserver.error
(rsc)\node_modules\zen-observable-ts\module.js (229:0)
eval
(rsc)\node_modules\@apollo\client\utilities\observables\iteration.js (7:49)
Array.forEach
<anonymous>
iterateObserversSafely
(rsc)\node_modules\@apollo\client\utilities\observables\iteration.js (7:0)
Object.error
(rsc)\node_modules\@apollo\client\utilities\observables\Concast.js (76:42)
notifySubscription
(rsc)\node_modules\zen-observable-ts\module.js (137:0)
onNotify
(rsc)\node_modules\zen-observable-ts\module.js (176:0)
SubscriptionObserver.error
(rsc)\node_modules\zen-observable-ts\module.js (229:0)
handleError
(rsc)\node_modules\@apollo\client\link\http\parseAndCheckHttpResponse.js (170:0)
eval
(rsc)\node_modules\@apollo\client\link\http\createHttpLink.js (145:27)
process.processTicksAndRejections
node:internal/process/task_queues (95:5)

Answer 1

在 App Router 中，您需要将函数导出为 HTTP 方法名称，如下所示：

export const GET = (req: Request) => {
    return Response.json({ posts: [] })
}

export const POST = (req: Request) => {
    return Response.json({ posted: true })
}

export const DELETE = (req: Request) => {
    return Response.json({ deleted: true })
}

export const PUT = (req: Request) => {
    return Response.json({ updated: true })
}

现在，据我检查，

@as-integrations/next

尚未创建任何特殊功能，这是合理的，因为他们希望页面路由器也支持它。相反，他们建议here这样使用它：

graphql/route.ts

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };