Receiving a basic error "Cannot read properties of undefined" when trying to run codegen from client repo.

[agarciabz]

Which packages are impacted by your issue?

@graphql-codegen/cli, @graphql-codegen/client-preset

Describe the bug

Following the documentation provided in Apollo GraphQL docs: https://www.apollographql.com/docs/react/development-testing/static-typing#setting-up-your-project I installed dependencies with a basic codegen configuration. However when running graphql-codegen command through npm I get the following error, which is not very useful to know what is exactly happening here.

> graphql-codegen

✔ Parse Configuration
⚠ Generate outputs
  ❯ Generate to ./src/__generated__/
    ✖
      Failed to load schema from <my-dev-url>/graphql:
      Cannot read properties of undefined (reading 'profile')
      GraphQLError: Cannot read properties of undefined (reading 'profile')
      at createGraphQLError (/<my-repo>/node_modules/@graphql-tools/utils/cjs/errors.js:31:12)
      at /<my-repo>/node_modules/@graphql-tools/wrap/cjs/introspect.js:12:102
      at Array.map (<anonymous>)
      at getSchemaFromIntrospection (/<my-repo>/node_modules/@graphql-tools/wrap/cjs/introspect.js:12:58)
      at /<my-repo>/node_modules/@graphql-tools/wrap/cjs/introspect.js:35:32
      at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
      at async UrlLoader.load (/<my-repo>/node_modules/@graphql-tools/url-loader/cjs/index.js:219:29)
      at async /<my-repo>/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:14:39
      at async Promise.all (index 5)
      at async loadFile (/<my-repo>/node_modules/@graphql-tools/load/cjs/load-typedefs/load-file.js:12:9)
      GraphQL Code Generator supports:
      - ES Modules and CommonJS exports (export as default or named export "schema")
      - Introspection JSON File
      - URL of GraphQL endpoint
      - Multiple files with type definitions (glob expression)
      - String in config file
      Try to use one of above options and run codegen again.
    ◼ Load GraphQL documents
    ◼ Generate

Before this I requested the backend team to enable introspection query for the GraphQL endpoint.

My current dependencies are the following:

"react": "^16.14.0",
"@apollo/client": "^3.7.16",
"@graphql-codegen/cli": "^5.0.0",
"@graphql-codegen/client-preset": "^4.1.0",

And my codegen setup is this:

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

const config: CodegenConfig = {
  schema: '<my-dev-url>/graphql',
  // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
  documents: ['src/**/*.{ts,tsx}'],
  generates: {
    './src/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql'
      }
    }
  },
  ignoreNoDocuments: true,
}

Any tips on how to debug this issue are welcome.

Your Example Website or App

Can't disclose it.

Steps to Reproduce the Bug or Issue

1. Ask backend team to enable introspection query for GraphQL endpoint.
2. Install dependencies.
3. Create codegen.ts file.
4. Run command graphql-codegen.

Expected behavior

Expected result is having typings generated in src/generated/ folder.

Screenshots or Videos

No response

Platform

• OS: WSL on Windows
• NodeJS: 18.16.1
• graphql version: 16.6.0
• @graphql-codegen/cli version(s): 5.0.0
• @graphql-codegen/client-preset version(s): 4.1.0

Codegen Config File

const config: CodegenConfig = {
  schema: '<my-dev-url>/graphql',
  // this assumes that all your source files are in a top-level `src/` directory - you might need to adjust this to your file structure
  documents: ['src/**/*.{ts,tsx}'],
  generates: {
    './src/__generated__/': {
      preset: 'client',
      plugins: [],
      presetConfig: {
        gqlTagName: 'gql'
      }
    }
  },
  ignoreNoDocuments: true,
}

Additional context

No response

[zirho]

try node 16. It seems cli does not work well with 18 yet. I could be wrong.

also try this instead of localhost

 schema: 'http://0.0.0.0:7021/graphql',

[agarciabz]

@zirho Hi, thanks for the suggestion but I got the same result. Plus I'm pointing to the graphql endpoint deployed in dev environment. I can't run it locally since I don't have access to the repo.

[zirho]

Then, would it be possible that deployed graphql server has no IntrospectionQuery enabled? Often times, it's disabled when it's deployed on remote servers (mostly for the production)

Were you able to see the schema on Postman or some client application to make a call?