GraphQL Instance Conflict in Next.js App Router with GraphQL Yoga

[blagoySimandov]

Environment

• Next.js: 14.2.24
• GraphQL: 16.10.0
• GraphQL Yoga: 4.0.4
• Apollo Client: 3.12.11
• Drizzle GraphQL: 0.8.5
• Drizzle ORM: 0.40.0
• MySQL2: 3.13.0
• Node.js: 18.x
• OS: macOS 24.1.0

Setup

I'm using Next.js App Router with GraphQL Yoga to create a GraphQL API endpoint. The schema is generated using Drizzle GraphQL from a MySQL database. On the frontend, I'm using Apollo Client to make GraphQL queries to this endpoint.

API Route Setup (app/api/graphql/route.ts)

import { createYoga } from 'graphql-yoga';
import { createSchema } from './schema';

interface NextContext {
	params: Promise<Record<string, string>>;
}
let handler: any;

async function createHandler() {
	const schema = await createSchema();
	if (!handler) {
		const yoga = createYoga<NextContext>({
			schema,
			graphqlEndpoint: '/api/graphql'
		});
		handler = yoga.handleRequest;
	}
	return handler;
}

const handlerPromise = createHandler();

export async function GET(request: Request, context: NextContext) {
	const handler = await handlerPromise;
	return handler(request, context);
}

export async function POST(request: Request, context: NextContext) {
	const handler = await handlerPromise;
	return handler(request, context);
}

export async function OPTIONS(request: Request, context: NextContext) {
	const handler = await handlerPromise;
	return handler(request, context);
}

Schema Generation (app/api/graphql/schema.ts)

import { buildSchema } from 'drizzle-graphql';
import { drizzle } from 'drizzle-orm/mysql2';
import mysql from 'mysql2/promise';
import * as dbSchema from '@/db/schema';

// generate the executable schema
export const createSchema = async () => {
	const connection = await mysql.createConnection({
		host: process.env.DB_HOST || 'localhost',
		user: process.env.DB_USER || 'root',
		password: process.env.DB_PASSWORD || '',
		database: process.env.DB_NAME || 'dev-db'
	});

	const db = drizzle(connection, { schema: dbSchema, mode: 'default' });

	const { schema } = buildSchema(db);

	return schema;
};

Issue

When making GraphQL queries to the endpoint, I encounter the following error:

{
	"errors": [
		{
			"message": "Cannot use GraphQLScalarType \"Int\" from another module or realm.\n\nEnsure that there is only one instance of \"graphql\" in the node_modules\ndirectory. If different versions of \"graphql\" are the dependencies of other\nrelied on modules, use \"resolutions\" to ensure only one version is installed.\n\nhttps://yarnpkg.com/en/docs/selective-version-resolutions\n\nDuplicate \"graphql\" modules cannot be used at the same time since different\nversions may have different capabilities and behavior. The data from one\nversion used in the function from another could produce confusing and\nspurious results.",
			"path": ["laytime"],
			"extensions": {
				"code": "DOWNSTREAM_SERVICE_ERROR"
			}
		}
	],
	"data": null
}

Attempted Solutions

Added npm overrides in package.json:

"overrides": {
  "graphql": "16.10.0"
}

Deleted node_modules and .next multiple times. Even tried deleteing the package-lock file.

Additional Observations

• Running npm ls graphql shows that all packages are using GraphQL 16.10.0
• The error also occurs in a similar format when i try to use any type of filter for example
  GraphQLInputObjectType "MyObjectFilter"

Any help or guidance would be greatly appreciated!

[ardatan]

Please create an issue with a minimal isolated reproduction on CodeSandbox. Thanks!

[blagoySimandov]

Moved the graphql backend to a separate service outside of next.js and this solved the issue.
Seems that the shared backend/frontend codebase of next was causing the issue.

EDIT: Still not sure why/how to solve the issue in Next without the need of another service.