NextJS 13 (app/api/graphql/route.js) Integration

[bahmanworld]

I wanna integrate graphql-yoga with nextjs 13 in app/api/graphql/route.js.
Is there any way to do that?

I've tried some tricks before but i've got no answer:

import { createSchema, createYoga } from 'graphql-yoga'
import { NextRequest } from 'next/server'

const schema = createSchema({
    typeDefs: /* GraphQL */ `
    type Query {
        hello: String!
    }
    `,
    resolvers: {
        Query: {
            hello: () => 'Hello World!'
        }
    }
})

const yoga = createYoga({
    schema: schema,
    graphqlEndpoint: '/api/graphql'
})

export const GET = async (request: NextRequest) => {
    return await yoga({ request })
}

or

import { createSchema, createYoga } from 'graphql-yoga'

const schema = createSchema({
    typeDefs: /* GraphQL */ `
    type Query {
        hello: String!
    }
    `,
    resolvers: {
        Query: {
            hello: () => 'Hello World!'
        }
    }
})

const yoga = createYoga({
    schema: schema,
    graphqlEndpoint: '/api/graphql'
})

export default yoga

[ardatan]

Did you try the following;

export {
 yoga as GET,
 yoga as POST
};

Also as far as I see, our nextjs example still works;
https://github.com/dotansimha/graphql-yoga/blob/main/examples/nextjs/pages/api/graphql.ts

[bahmanworld]

Did you try the following;

export {
 yoga as GET,
 yoga as POST
};

thanks @ardatan
i tried, still doesn't work.

[ardatan]

Could you share a reproduction on CodeSandbox or StackBlitz? Thanks!

[bahmanworld]

Could you share a reproduction on CodeSandbox or StackBlitz? Thanks!

Here the CodeSandBox share link:
🌎 Live Website: nextjs 13 codesandbox project + graphql-yoga

🔴 I guess graphql-yoga isn't compatible with nextjs@13 with new app folder and routing system
🟢 https://us3oz2-3000.csb.app/api/hello route works fine
🟡 i already tried graphql-yoga on nextjs@13 without app folder and it works fine

[mmahalwy]

Running into the same problem as well :(

[mmahalwy]

The way to solve is:

export async function POST(request: Request) {
  const result = await yoga.fetch(request.url, {
    method: 'POST',
    headers: request.headers,
    body: await request.text(),
  });

  return new Response(result.body, {
    status: result.status,
    headers: result.headers,
  });
}

[ardatan]

Could you add fetchAPI: { Response } and try again?

import { createYoga, createSchema } from 'graphql-yoga'

const yoga = createYoga({
    graphqlEndpoint: '/api/graphql',
    schema: createSchema({
        typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
        resolvers: {
            Query: {
                greetings: () =>
                    'This is the `greetings` field of the root `Query` type',
            },
        },
    }),
    fetchAPI: {
        Response: Response
    }
})

export {
    yoga as GET,
    yoga as POST,
}

[thai-recurmetrics]

@ardatan your example works great locally. However, when deployed to Amplify, I got the following error:

2023-05-06T14:55:56.782Z [WARNING]: src/app/api/graphql/route.ts
Type error: Route "src/app/api/graphql/route.ts" has an invalid "GET" export:
Type "{ request: Request; } & Partial<{}>" is not a valid type for the function's first argument.
Expected "Request | NextRequest", got "{ request: Request; } & Partial<{}>".

Any idea how to address this?

[EmrysMyrddin]

@thai-recurmetrics This is because it seems Next compiler doesn't check for routes export types on dev mode.

Export yoga.handleRequest instead of yoga should fix the typing issue :

import { createYoga, createSchema } from 'graphql-yoga'

const { handleRequest } = createYoga({
  graphqlEndpoint: '/api/graphql',
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () =>
          'This is the `greetings` field of the root `Query` type',
      },
    },
  }),
  fetchAPI: {
    Response: Response,
    Request: Request,
  },
})

export { handleRequest as GET, handleRequest as POST }

[bahmanworld]

@thai-recurmetrics This is because it seems Next compiler doesn't check for routes export types on dev mode.

Export yoga.handleRequest instead of yoga should fix the typing issue :

import { createYoga, createSchema } from 'graphql-yoga'

const { handleRequest } = createYoga({
  graphqlEndpoint: '/api/graphql',
  schema: createSchema({
    typeDefs: /* GraphQL */ `
      type Query {
        greetings: String
      }
    `,
    resolvers: {
      Query: {
        greetings: () =>
          'This is the `greetings` field of the root `Query` type',
      },
    },
  }),
  fetchAPI: {
    Response: Response,
    Request: Request,
  },
})

export { handleRequest as GET, handleRequest as POST }

It works great!
thanks @EmrysMyrddin

[thai-recurmetrics]

@bahmanworld thanks for the example! I actually got it working.