keystonejs / keystone

The most powerful headless CMS for Node.js — built with GraphQL and React
https://keystonejs.com
MIT License
8.98k stars 1.13k forks source link

getContext creates GraphQl duplicate error. #9177

Closed mandymozart closed 1 week ago

mandymozart commented 1 week ago

I was trying to build a standalone version of examples/framework-nextjs-app-directory. I locked the graphql version to 16.8.1 which solved some dependencies issues as well as stopped using yarn, which made the prisma client basically uncontrolleable ending up in various locations inside the node_modules folder.

I got the project running again but am still not able to access context via getContext as described in the example.


Ensure that there is only one instance of "graphql" in the node_modules
directory. If different versions of "graphql" are the dependencies of other
relied on modules, use "resolutions" to ensure only one version is installed.

This is my package.json

  "name": "vibesss",
  "version": "1.0.0",
  "private": true,
  "scripts": {
    "keystone:dev": "dotenvx run -- keystone dev",
    "keystone:start": "dotenvx run -- keystone start",
    "keystone:build": "dotenvx run -- keystone build",
    "keystone:postinstall": "keystone build --no-ui --frozen",
    "next:dev": "dotenvx run -- next dev",
    "next:build": "dotenvx run -- next build",
    "next:start": "dotenvx run -- next start",
    "next:lint": "dotenvx run -- next lint",
    "postinstall": "prisma generate && keystone postinstall"
  },
  "dependencies": {
    "@dotenvx/dotenvx": "^0.45.0",
    "@keystone-6/auth": "^7.0.0",
    "@keystone-6/core": "^5.0.0",
    "@keystone-6/document-renderer": "^1.1.2",
    "@keystone-6/fields-document": "^7.0.0",
    "@prisma/client": "^5.15.1",
    "graphql": "16.8.1",
    "graphql-request": "^7.1.0",
    "graphql-yoga": "^5.4.0",
    "next": "^14.2.4",
    "react": "^18.3.1",
    "react-dom": "^18.3.1",
    "typescript": "^4.9.5"
  },
  "devDependencies": {
    "prisma": "^5.15.1",
    "syncpack": "^12.3.2"
  },
  "resolutions": {
    "graphql": "16.8.1"
  }
}

My context.ts

import { getContext } from '@keystone-6/core/context';
import config from '../../keystone';
import { Context } from '.keystone/types';
import * as PrismaModule from '.prisma/client';

// Making sure multiple prisma clients are not created during dev hot reloading
export const keystoneContext: Context =
  (globalThis as any).keystoneContext || getContext(config, PrismaModule);

if (process.env.NODE_ENV !== 'production') {
  (globalThis as any).keystoneContext = keystoneContext;
}

NODE VERSION v18.19.1

Any help appreciated how to detect where and why there is two versions of GRAPHQL used.

I was using 'syncpack' to see if there is any duplicates, and manually, but I can not see any.

Switching to PNPM caused more problems than it solved for this nextjs, keystone mutant ;)

marekryb commented 1 week ago

Hi,

Most probably you have correct graphql versions, but it is being transpiled differently by keystone and nextjs (code for check) Try modifying your next.config.js like below (experimental.serverComponentsExternalPackages): https://github.com/keystonejs/keystone/blob/main/examples/framework-nextjs-app-directory/next.config.mjs