Uh-oh! There seems to be an issue with the response. It appears that the

Question

Uh-oh! There seems to be an issue with the response. It appears that the

Struggling to navigate the graphql in apollo client/server for a Next.js project. The terminal is showing an error message

No HTTP methods exported in '..\app\api\graphql\route.ts'. Export a named export for each HTTP method.

. I'm still new to these technologies and unsure about the directory structure. All four files mentioned are located in the same folder app/api/graphql.

Below are the code snippets:

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

Error displayed on the browser:

    Unhandled Runtime Error
    Error: Response not successful: Received status code 405
    
    Call Stack
    - Traces of errors -

typescript graphql apollo-client apollo-server next.js14

Answer 1

Answer №1

To define functions in the App Router, you must export them as HTTP method names. See the example below:

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

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

It appears that @as-integrations/next does not provide dedicated functions for this purpose, likely to maintain compatibility with the pages router. Instead, they suggest using the following approach:

graphql/route.ts

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };

Answer 2

To define functions in the App Router, you must export them as HTTP method names. See the example below:

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

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

It appears that @as-integrations/next does not provide dedicated functions for this purpose, likely to maintain compatibility with the pages router. Instead, they suggest using the following approach:

graphql/route.ts

const handler = startServerAndCreateNextHandler(server);

export { handler as GET, handler as POST };

Answer 3

Answer №2

The issue was resolved by incorporating page.ts with the code snippet below:

const userQuery = gql`
  query {   
      hello    
  }
`;

Answer 4

The issue was resolved by incorporating page.ts with the code snippet below:

const userQuery = gql`
  query {   
      hello    
  }
`;

Uh-oh! There seems to be an issue with the response. It appears that the

ApolloClient.ts

typeDefs.ts

resolver.ts

graphql.ts

Answer №1

graphql/route.ts

Answer №2

Similar questions

Tips for enforcing strict typing in TypeScript when implementing abstract functions

Exploring the capabilities of supertest by testing endpoints in Express with NodeJS

The node command line does not recognize the term 'require'

Retrieving routing information from directives within angular2

The error message "ng: command not found" popped up despite successfully installing the latest @angular/cli using npm linking

What is the process for retrieving the API configuration for my admin website to incorporate into the Signin Page?

Comparing angular2/core and @angular/core: What sets them apart?

What is the best way to connect to a library using a script within a Typescript React application?

Enhancing Type Safety in Typescript through Key/Property Type Guards

Tips for obtaining the iframe #document with cheeriojs?

Include a string in every tuple

Iterating through a for loop in Angular2 to send multiple GET requests to a Django backend

Typescript's implementation of AngularJs provider

The error message indicates that the property 'current' is not found in the type '[boolean, Dispatch<SetStateAction<boolean>>]'

How can I store an array of objects in a Couchbase database for a specific item without compromising the existing data?

Tips for retrieving the generated ID from the server immediately following form submission using the Post method in TypeScript

Tips for implementing Peer.js in Next.js using TypeScript?

Every time I attempt to destructure the state object in react typescript, I encounter the error message stating 'Object is possibly undefined'

TypeScript does not raise errors for ANY variables that are initialized later

Incorporating an offset with the I18nPluralPipe