Search code examples
reactjsnext.jsgraphqlcode-generationgraphql-codegen

graphql codegen typescript suddenly brokes and don't want generate types

GraphQL code generator ceased functioning correctly anymore. It no longer generates the expected code and has also deleted all previously generated files. codegen.ts and package.json was not changed. Generating with npm run generate - graphql-codegen --config codegen.ts What the problem is?

Comparison of previously generated output versus the current output: enter image description here

enter image description here enter image description here

enter image description here

My current files:

codegen.ts

import type { CodegenConfig } from '@graphql-codegen/cli';

const config: CodegenConfig = {
    schema: 'https://studyhelper-backend.azurewebsites.net/graphql/',
    documents: ['lib/**/*.ts', 'app/**/*.tsx'],
    ignoreNoDocuments: true,
    generates: {
        './src/graphql/': {
            preset: 'client',
            config: {
                documentMode: 'string',
            },
        },
        './schema.graphql': {
            plugins: ['schema-ast'],
            config: {
                includeDirectives: true,
            },
        },
    },
};

export default config;

package.json

{
  "name": "studyhelper-frontend",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "node scripts/pre-run.js && next dev",
    "build": "next build",
    "start": "node scripts/pre-run.js && next start",
    "lint": "next lint",
    "prepare": "husky install",
    "format": "prettier --write .",
    "format:check": "prettier --check .",
    "generate": "graphql-codegen --config codegen.ts",
    "watch": "graphql-codegen --config codegen.ts --watch"
  },
  "dependencies": {
    "@preline/toggle-password": "^2.3.0",
    "@tanstack/react-query": "^5.64.1",
    "@tanstack/react-query-devtools": "^5.64.1",
    "@typescript-eslint/eslint-plugin": "^8.19.0",
    "@typescript-eslint/parser": "^8.19.0",
    "dotenv": "^16.4.5",
    "graphql": "^16.10.0",
    "graphql-request": "^7.1.2",
    "graphql-tag": "^2.12.6",
    "i18next": "^23.16.5",
    "moment": "^2.30.1",
    "next": "14.2.10",
    "next-i18next": "^15.3.1",
    "preline": "^2.3.0",
    "react": "^18",
    "react-clock": "^5.1.0",
    "react-dom": "^18.3.1",
    "react-hook-form": "^7.53.2",
    "react-i18next": "^15.1.1",
    "react-icons": "^5.2.1",
    "react-slick": "^0.30.2",
    "react-spinner-material": "^1.4.0",
    "slick-carousel": "^1.8.1",
    "tailwindcss-textshadow": "^2.1.3",
    "urql": "^4.2.1"
  },
  "devDependencies": {
    "@0no-co/graphqlsp": "^1.12.16",
    "@eslint/js": "^9.17.0",
    "@graphql-codegen/cli": "^5.0.3",
    "@graphql-codegen/client-preset": "^4.5.1",
    "@graphql-codegen/schema-ast": "^4.1.0",
    "@parcel/watcher": "^2.5.0",
    "@types/node": "^20",
    "@types/react": "^18",
    "@types/react-clock": "^4.1.0",
    "@types/react-dom": "^18",
    "@types/react-slick": "^0.23.13",
    "eslint": "^9.17.0",
    "eslint-config-next": "^15.1.3",
    "eslint-config-prettier": "^9.1.0",
    "eslint-plugin-prettier": "^5.2.1",
    "eslint-plugin-react": "^7.37.3",
    "globals": "^15.14.0",
    "lint-staged": "^15.3.0",
    "postcss": "^8",
    "prettier": "^3.4.2",
    "react-clock": "^5.1.0",
    "tailwindcss": "^3.4.1",
    "typescript": "^5",
    "typescript-eslint": "^8.19.0"
  },
  "optionalDependencies": {
    "husky": "^8.0.0"
  },
  "lint-staged": {
    "*.{js,jsx,ts,tsx}": "eslint --fix",
    "*.{json,css,md}": "prettier --write"
  }
}
Solution

  • In the codegen.ts file, the destinations of the documents should be in the same folder as the generated output.

    documents: ['lib/**/*.ts'],
ignoreNoDocuments: true,
generates: {
   './graphql/': {
      preset: 'client',
      config: {
          documentMode: 'string'
      }
   },