Error: Response not successful: Received status code 405

Question

I am having trouble getting around the graphql in apollo client\server for a Next.js (app router) project. terminal says No HTTP methods exported in '..\app\api\graphql\route.ts'. Export a named export for each HTTP method. I am new to these tech stacks . Also would like to know if the directories are correct. I have all 4 following files under the same folder app/api/graphql

Following are the codes

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

in the App Router you need to export functions as HTTP method names like so:

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 })
}

Now as I checked, @as-integrations/next has not created any special functions for that which is reasonable as they wanted to keep it supported for the pages router as well. Instead, they recommend here it to use it this way:

graphql/route.ts

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };

Answer 2

It was solved having page.ts with the following

const userQuery = gql`
  query {   
      hello    
  }
`;