Hotchocolate Graphql with Angular Apollo Code Gen

I’m trying to test out the apollo graphql codegen for angular.

as such I created a net 5 server that hosts Grapqhl endpoint at https://localhost:8081/api/graphql/.

It loads fine and no worries.

I’ve then created a dummy angular project with apollo graphql in it and installed the code gen as per these two guides:

1. https://www.graphql-code-generator.com/docs/getting-started/installation
2. https://www.graphql-code-generator.com/docs/guides/angular

This resulted in codegen yml as follows:

overwrite: true
schema: "https://localhost:8080/api/graphql"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
  ./graphql.schema.json:
    plugins:
      - "introspection"

As per instructions I’ve run the generate command however it fails as follows:

> [email protected] codegen
> graphql-codegen --config codegen.yml

  √ Parse configuration
  > Generate outputs
    > Generate src/generated/graphql.ts
      × Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate
    > Generate ./graphql.schema.json
      × Load GraphQL schemas
        → Failed to load schema
        Load GraphQL documents
        Generate


 Found 2 errors

  ✖ ./graphql.schema.json
    Failed to load schema from https://localhost:8081/api/graphql:

        fetch failed
        TypeError: fetch failed
    at Object.processResponse (D:CodeReposdummyTestapollo-testnode_modulesundicilibfetchindex.js:200:23)
    at D:CodeReposdummyTestapollo-testnode_modulesundicilibfetchindex.js:941:38
    at node:internal/process/task_queues:141:7
    at AsyncResource.runInAsyncScope (node:async_hooks:201:9)
    at AsyncResource.runMicrotask (node:internal/process/task_queues:138:8)
    at processTicksAndRejections (node:internal/process/task_queues:96:5)

        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.

EDIT 1 – Package.JSON

{
  "name": "apollo-test",
  "version": "0.0.0",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "codegen": "graphql-codegen --config codegen.yml"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "~13.3.0",
    "@angular/common": "~13.3.0",
    "@angular/compiler": "~13.3.0",
    "@angular/core": "~13.3.0",
    "@angular/forms": "~13.3.0",
    "@angular/platform-browser": "~13.3.0",
    "@angular/platform-browser-dynamic": "~13.3.0",
    "@angular/router": "~13.3.0",
    "@apollo/client": "^3.0.0",
    "@graphql-codegen/cli": "^2.6.2",
    "@graphql-codegen/typescript": "^2.4.11",
    "@graphql-codegen/typescript-apollo-angular": "^3.4.10",
    "@graphql-codegen/typescript-operations": "^2.4.0",
    "apollo-angular": "^3.0.1",
    "graphql": "^16.5.0",
    "rxjs": "~7.5.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.11.4"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "~13.3.1",
    "@angular/cli": "~13.3.1",
    "@angular/compiler-cli": "~13.3.0",
    "@types/jasmine": "~3.10.0",
    "@types/node": "^12.11.1",
    "jasmine-core": "~4.0.0",
    "karma": "~6.3.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.1.0",
    "karma-jasmine": "~4.0.0",
    "karma-jasmine-html-reporter": "~1.7.0",
    "typescript": "~4.6.2",
    "@graphql-codegen/typescript-operations": "2.4.0",
    "@graphql-codegen/typescript": "2.4.11",
    "@graphql-codegen/typescript-apollo-angular": "3.4.10",
    "@graphql-codegen/introspection": "2.1.1",
    "@graphql-codegen/cli": "2.6.2"
  }
}