Type 'V' does not satisfy the constraint 'OperationVariables'

[gurpreets-kalagato]

Describe the bug

When running apollo angular with angular 15, getting these errors:

1. Error: node_modules/apollo-angular/query-ref.d.ts:9:33 - error TS2344: Type 'V' does not satisfy the constraint 'OperationVariables'.
2. Error: node_modules/apollo-angular/types.d.ts:23:105 - error TS2344: Type 'TVariables' does not satisfy the constraint 'OperationVariables'.

To Reproduce Steps to reproduce the behavior:

Run apollo-angular package with angular 15 (note: angular project was created with ng new command)

Expected behavior

' It should run without any typescript error. **Environment:** ``` - "@angular/cli": "^15.1.1" - "@angular/core": "^15.1.0", - "@apollo/client": "^3.7.4" - "apollo-angular": "^4.2.0" - "graphql": "^16.6.0" - "typescript": "~4.9.4", ``` **Additional context**

This compilation error goes away when making strict flag to false in tsconfig.json

[tin-pham]

Same issue

[PowerKiKi]

PR are welcomed to fix this issue

[pawelpiotrowski]

Check this comment please. For me it was @apollo/client v 3.7.6 that was causing the issue 3.7.5 works fine.

[BryanCastroMCM]

The last versión 3.7.7 have the same error, Im use version 3.7.1 and woks fine to me

[red-game-dev]

Interesting with the above versions mentioned worked, for me still does not. Perhaps there is another package version in the following that needs to be changed?

  "dependencies": {
    "@angular/animations": "^15.1.2",
    "@angular/common": "^15.1.2",
    "@angular/compiler": "^15.1.2",
    "@angular/core": "^15.1.2",
    "@angular/forms": "^15.1.2",
    "@angular/platform-browser": "^15.1.2",
    "@angular/platform-browser-dynamic": "^15.1.2",
    "@angular/router": "^15.1.2",
    "@apollo/client": "^3.7.1",
    "@ngrx/effects": "^15.2.1",
    "@ngrx/store": "^15.2.1",
    "@typescript-eslint/eslint-plugin": "^5.50.0",
    "@typescript-eslint/parser": "^5.50.0",
    "apollo-angular": "^4.1.0",
    "eslint": "^8.33.0",
    "graphql": "^16",
    "jest": "^29.4.1",
    "prettier": "^2.8.3",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.1.4",
    "@angular/cli": "~15.1.4",
    "@angular/compiler-cli": "^15.1.0",
    "@types/jasmine": "~4.3.0",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.8.4"
  }

Most of this was generated from ng add apollo-angular, using the following setup: The Guild - Apollo Angular Get Started

Cheers 🍻

[luizemof]

Same issue for me. With versions 3.7.7 and 3.7.6 this issue happens but for 3.7.5 worked as expected.

[red-game-dev]

Same issue for me. With versions 3.7.7 and 3.7.6 this issue happens but for 3.7.5 worked as expected.

What are your dependencies versions? Perhaps I can compare why on mine does not work regardless of the version of apollo/client package.

Cheers 🍻

[PowerKiKi]

Before comparing all your dependencies, one of you probably should look for what was changed in apollo-client 3.7.6.

Also posting your package.json has a very limited use, because it doesn't tell what exact version is actually installed. Instead either look at the lock file, or better use yarn why. But really, first investigate apollo-client.

[red-game-dev]

Fair point, cheers 🍻

Before comparing all your dependencies, one of you probably should look for what was changed in apollo-client 3.7.6.

Also posting your package.json has a very limited use, because it doesn't tell what exact version is actually installed. Instead either look at the lock file, or better use yarn why. But really, first investigate apollo-client.

Fair Point, cheers 🍻

[luomavaltteri]

Same issue

[david-brink-talogy]

Looks like this is related to this PR in @apollo-client.

[clintSanch]

Mine still does not work, help? "dependencies": { "@angular/animations": "^15.1.2", "@angular/common": "^15.1.2", "@angular/compiler": "^15.1.2", "@angular/core": "^15.1.2", "@angular/forms": "^15.1.2", "@angular/platform-browser": "^15.1.2", "@angular/platform-browser-dynamic": "^15.1.2", "@angular/platform-server": "^15.1.2", "@angular/router": "^15.1.2", "@capacitor/android": "^4.6.2", "@capacitor/cli": "^4.6.2", "@capacitor/core": "^4.6.2", "@capacitor/ios": "^4.6.2", "@nguniversal/express-engine": "^15.1.0", "apollo-angular": "^4.2.0", "express": "^4.15.2", "rxjs": "~7.5.0", "tslib": "^2.3.0", "zone.js": "~0.11.4", "@apollo/client": "^3.0.0", "graphql": "^16" }, "devDependencies": { "@angular-devkit/build-angular": "^15.1.3", "@angular/cli": "~15.1.3", "@angular/compiler-cli": "^15.1.2", "@nguniversal/builders": "^15.1.0", "@types/express": "^4.17.0", "@types/jasmine": "~4.0.0", "@types/node": "^14.15.0", "jasmine-core": "~4.3.0", "karma": "~6.4.0", "karma-chrome-launcher": "~3.1.0", "karma-coverage": "~2.2.0", "karma-jasmine": "~5.1.0", "karma-jasmine-html-reporter": "~2.0.0", "typescript": "~4.9.4" }

[BryanCastroMCM]

Mine still does not work, help?. Try to use "apollo-angular": "^4.1.0" and "@apollo/client": "^3.7.1", it works to me

[grosch-intl]

I'm using typescript 4.9.5, apollo-angular 4.2.0 and @apollo/client 3.7.7 without success. I see this says "Merged" but there still seem to be more issues.

[clintSanch]

I'm using typescript 4.9.5, apollo-angular 4.2.0 and @apollo/client 3.7.7 without success. I see this says "Merged" but there still seem to be more issues.

still sailing in the same boat

[clintSanch]

Mine still does not work, help?. Try to use "apollo-angular": "^4.1.0" and "@apollo/client": "^3.7.1", it works to me

just did updates to "@apollo/client": "^3.7.7" and still not working on my side!

[ChBernat]

Works with 4.2.1-alpha-20230210085539-0e747997. I assume this will have to do until 4.2.1 is relased.

[JusticeN]

try ng add apollo-angular command. and see what changed in your package.json, tsconfig.json

adding it this way makes needed change to make it works. this was the big change thatmake it works for me after running th add command.

"lib": [ "ES2022", "dom", "esnext.asynciterable" ],

[PowerKiKi]

Solved by #1910, released as 4.2.1.

[clintSanch]

Finally, solved the errors by visiting: node_modules/apollo-angular/'apollo.d.ts, query-ref.d.ts, query.d.ts, and types.d.ts' files

[mdddev]

Hi,

I am still experiencing this issue if in the config class I have enabled to create the sdkClass. It works I ommit sdkClass: true. However, this is super helpful and I really would like to keep using it. The exaxt error message is

Type 'V' does not satisfy the constraint 'OperationVariables'. This type parameter might need an `extends ApolloCore.OperationVariables` constraint.

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

const config: CodegenConfig = {
  overwrite: true,
  schema: "https://localhost:7029/graphql",
  documents: "src/**/*.graphql",
  generates: {
    "src/graphql/graphql.generated.ts": {
      plugins: ['typescript', 'typescript-operations', 'typescript-apollo-angular'],
      config: {
        addExplicitOverride: true,
        skipTypename: true,
        sdkClass: true
      }
    },
    "./graphql.schema.json": {
      plugins: ["introspection"]
    }
  }
};

export default config;

Here are the parts that are added to graphql.generated.ts if I set sdkClass to true:

  type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;

  interface WatchQueryOptionsAlone<V> extends Omit<ApolloCore.WatchQueryOptions<V>, 'query' | 'variables'> {}
  interface QueryOptionsAlone<V> extends Omit<ApolloCore.QueryOptions<V>, 'query' | 'variables'> {}
  interface MutationOptionsAlone<T, V> extends Omit<ApolloCore.MutationOptions<T, V>, 'mutation' | 'variables'> {}

  @Injectable({ providedIn: 'root' })
  export class ApolloAngularSDK {
    constructor(
      private addAnimalGql: AddAnimalGQL,
      private deleteAnimalGql: DeleteAnimalGQL,
      private editAnimalGql: EditAnimalGQL,
      private getAnimalsGql: GetAnimalsGQL,
      private dronesGql: DronesGQL
    ) {}

    addAnimal(variables: AddAnimalMutationVariables, options?: MutationOptionsAlone<AddAnimalMutation, AddAnimalMutationVariables>) {
      return this.addAnimalGql.mutate(variables, options)
    }

    deleteAnimal(variables: DeleteAnimalMutationVariables, options?: MutationOptionsAlone<DeleteAnimalMutation, DeleteAnimalMutationVariables>) {
      return this.deleteAnimalGql.mutate(variables, options)
    }

    editAnimal(variables: EditAnimalMutationVariables, options?: MutationOptionsAlone<EditAnimalMutation, EditAnimalMutationVariables>) {
      return this.editAnimalGql.mutate(variables, options)
    }

    getAnimals(variables?: GetAnimalsQueryVariables, options?: QueryOptionsAlone<GetAnimalsQueryVariables>) {
      return this.getAnimalsGql.fetch(variables, options)
    }

    getAnimalsWatch(variables?: GetAnimalsQueryVariables, options?: WatchQueryOptionsAlone<GetAnimalsQueryVariables>) {
      return this.getAnimalsGql.watch(variables, options)
    }

    drones(variables?: DronesQueryVariables, options?: QueryOptionsAlone<DronesQueryVariables>) {
      return this.dronesGql.fetch(variables, options)
    }

    dronesWatch(variables?: DronesQueryVariables, options?: WatchQueryOptionsAlone<DronesQueryVariables>) {
      return this.dronesGql.watch(variables, options)
    }
  }

Afaik, I should be on a working version of the package.

{
  "name": "myproject",
  "version": "0.0.1",
  "scripts": {
    "ng": "ng",
    "start": "ng serve",
    "build": "ng build",
    "watch": "ng build --watch --configuration development",
    "test": "ng test",
    "codegen": "cross-env NODE_TLS_REJECT_UNAUTHORIZED=0 graphql-codegen --config codegen.ts"
  },
  "private": true,
  "dependencies": {
    "@angular/animations": "^15.2.0",
    "@angular/cdk": "^15.2.8",
    "@angular/common": "^15.2.0",
    "@angular/compiler": "^15.2.0",
    "@angular/core": "^15.2.0",
    "@angular/forms": "^15.2.0",
    "@angular/material": "^15.2.8",
    "@angular/platform-browser": "^15.2.0",
    "@angular/platform-browser-dynamic": "^15.2.0",
    "@angular/router": "^15.2.0",
    "@apollo/client": "^3.7.14",
    "@ngrx/effects": "^15.4.0",
    "@ngrx/store": "^15.4.0",
    "apollo-angular": "^4.2.1",
    "graphql": "^16.6.0",
    "rxjs": "~7.8.0",
    "tslib": "^2.3.0",
    "zone.js": "~0.12.0"
  },
  "devDependencies": {
    "@angular-devkit/build-angular": "^15.2.6",
    "@ngrx/store-devtools": "^15.4.0",
    "@angular/cli": "~15.2.6",
    "@angular/compiler-cli": "^15.2.0",
    "@fortawesome/fontawesome-free": "^6.4.0",
    "@graphql-codegen/cli": "3.3.1",
    "@graphql-codegen/introspection": "3.0.1",
    "@graphql-codegen/typescript-apollo-angular": "3.5.6",
    "@graphql-codegen/typescript-operations": "^3.0.4",
    "@types/jasmine": "~4.3.0",
    "@types/react": "^18.2.5",
    "cross-env": "^7.0.3",
    "jasmine-core": "~4.5.0",
    "karma": "~6.4.0",
    "karma-chrome-launcher": "~3.1.0",
    "karma-coverage": "~2.2.0",
    "karma-jasmine": "~5.1.0",
    "karma-jasmine-html-reporter": "~2.0.0",
    "typescript": "~4.9.4"
  }
}

[AhmedBHameed]

Is that issue resolved? I'm still encounter the same issue. Here is my configuration:

{
  "name": "@xu-group/source",
  "version": "0.0.0",
  "license": "MIT",
  "scripts": {
    "ui:gen:secrets": "npx ts-node libs/common/scripts/generate-ui-secrets.ts",
    "heroku-prebuild": "rm -rf node_modules/nx && npm i nx",
    "heroku-postbuild": "node node_modules/.bin/nx run-many --target=build --projects=$NX_APP_NAME",
    "server:production": "node -r newrelic dist/apps/server/main.js",
    "scorm-manager:production": "node -r newrelic dist/apps/scorm-manager/main.js",
    "certificates:production": "rm -rf node_modules/puppeteer && npm i puppeteer && node -r newrelic dist/apps/certificates/main.js",
    "learner-ui:production": "node -r newrelic dist/apps/learner-ui/server.js",
    "admin-ui:production": "node -r newrelic dist/apps/admin-ui/server.js",
    "migration:gen:config": "npx ts-node libs/common/scripts/generate-migration-configuration.ts migration",
    "preupload-scorm-launcher": "npx nx build scorm-launcher --base-href=scorm-launcher",
    "upload-scorm-launcher": "npx ts-node --project apps/scorm-manager/tsconfig.app.json -r tsconfig-paths/register apps/scorm-manager/src/commander/main.ts upload-scorm-launcher"
  },
  "private": true,
  "legacy-peer-deps": true,
  "devDependencies": {
    "@angular-devkit/build-angular": "~16.1.0",
    "@angular-devkit/core": "~16.1.0",
    "@angular-devkit/schematics": "~16.1.0",
    "@angular-eslint/eslint-plugin": "~16.0.0",
    "@angular-eslint/eslint-plugin-template": "~16.0.0",
    "@angular-eslint/template-parser": "~16.0.0",
    "@angular/cli": "~16.1.0",
    "@angular/compiler-cli": "~16.1.0",
    "@angular/language-service": "~16.1.0",
    "@graphql-codegen/cli": "5.0.0",
    "@graphql-codegen/client-preset": "^4.1.0",
    "@graphql-codegen/introspection": "4.0.0",
    "@graphql-codegen/typescript": "^4.0.1",
    "@graphql-codegen/typescript-apollo-angular": "3.5.6",
    "@graphql-codegen/typescript-operations": "^4.0.1",
    "@nestjs/schematics": "^10.0.1",
    "@nestjs/testing": "^10.1.2",
    "@nx/angular": "16.5.1",
    "@nx/cypress": "16.5.1",
    "@nx/esbuild": "16.6.0",
    "@nx/eslint-plugin": "16.5.1",
    "@nx/express": "^16.6.0",
    "@nx/jest": "16.6.0",
    "@nx/js": "16.6.0",
    "@nx/linter": "16.5.1",
    "@nx/nest": "16.5.1",
    "@nx/node": "16.6.0",
    "@nx/web": "16.5.1",
    "@nx/webpack": "16.6.0",
    "@nx/workspace": "16.5.1",
    "@schematics/angular": "~16.1.0",
    "@types/express": "4.17.13",
    "@types/jest": "^29.4.0",
    "@types/localtunnel": "^2.0.1",
    "@types/lodash": "^4.14.195",
    "@types/mime-types": "^2.1.1",
    "@types/node": "~18.7.1",
    "@types/object-hash": "^3.0.5",
    "@types/supertest": "^2.0.12",
    "@typescript-eslint/eslint-plugin": "^5.60.1",
    "@typescript-eslint/parser": "^5.60.1",
    "autoprefixer": "^10.4.14",
    "axios": "^1.4.0",
    "cy-verify-downloads": "^0.1.15",
    "cypress": "^12.16.0",
    "cypress-mailosaur": "^2.13.0",
    "esbuild": "^0.17.17",
    "eslint": "~8.15.0",
    "eslint-config-prettier": "8.1.0",
    "eslint-plugin-cypress": "^2.10.3",
    "ioredis-mock": "^8.9.0",
    "jest": "^29.4.1",
    "jest-environment-jsdom": "^29.4.1",
    "jest-environment-node": "^29.4.1",
    "jest-preset-angular": "~13.1.0",
    "localtunnel": "^2.0.2",
    "mongodb-memory-server": "^8.13.0",
    "msw": "^1.3.1",
    "nx": "16.5.1",
    "nx-cloud": "latest",
    "postcss": "^8.4.27",
    "prettier": "^2.6.2",
    "supertest": "^6.3.3",
    "supertest-graphql": "^1.1.4",
    "tailwindcss": "^3.3.3",
    "ts-jest": "^29.1.0",
    "ts-node": "10.9.1",
    "typescript": "~5.1.3"
  },
  "dependencies": {
    "@amplitude/analytics-browser": "^2.3.3",
    "@angular/animations": "~16.1.0",
    "@angular/cdk": "^16.1.7",
    "@angular/common": "~16.1.0",
    "@angular/compiler": "~16.1.0",
    "@angular/core": "~16.1.0",
    "@angular/forms": "~16.1.0",
    "@angular/localize": "^16.2.7",
    "@angular/material": "^16.1.7",
    "@angular/platform-browser": "~16.1.0",
    "@angular/platform-browser-dynamic": "~16.1.0",
    "@angular/router": "~16.1.0",
    "@apollo/client": "^3.7.17",
    "@apollo/server": "^4.8.1",
    "@azure/functions": "3.5.1",
    "@azure/identity": "^1.3.0",
    "@azure/storage-blob": "^12.15.0",
    "@bull-board/api": "^5.8.0",
    "@bull-board/express": "^5.8.0",
    "@bull-board/nestjs": "^5.8.0",
    "@clerk/clerk-js": "4.38.4",
    "@clerk/clerk-sdk-node": "^4.10.15",
    "@contentful/rich-text-html-renderer": "^16.1.1",
    "@nestjs-modules/ioredis": "^1.0.1",
    "@nestjs/apollo": "^12.0.7",
    "@nestjs/axios": "^3.0.0",
    "@nestjs/bull": "^10.0.1",
    "@nestjs/common": "^10.0.2",
    "@nestjs/config": "^3.0.0",
    "@nestjs/core": "^10.0.2",
    "@nestjs/event-emitter": "^2.0.2",
    "@nestjs/graphql": "^12.0.8",
    "@nestjs/mongoose": "^10.0.1",
    "@nestjs/platform-express": "^10.0.2",
    "@ngneat/until-destroy": "^10.0.0",
    "@ngx-translate/core": "^15.0.0",
    "@ngx-translate/http-loader": "^8.0.0",
    "@ntegral/nestjs-sentry": "^4.0.0",
    "@sentry/node": "^7.60.1",
    "@sentry/tracing": "^7.60.1",
    "@types/adm-zip": "^0.5.0",
    "@types/ejs": "^3.1.2",
    "adm-zip": "^0.5.10",
    "apollo-angular": "^5.0.0",
    "apollo-client": "^2.6.10",
    "axios": "^1.0.0",
    "bull": "^4.11.3",
    "class-transformer": "^0.5.1",
    "class-validator": "^0.14.0",
    "contentful": "^10.4.2",
    "contentful-management": "^10.40.0",
    "cors": "^2.8.5",
    "dataloader": "^2.2.2",
    "date-fns": "^2.30.0",
    "ejs": "^3.1.6",
    "ejs-lint": "^1.2.1",
    "express": "^4.18.1",
    "fast-deep-equal": "^3.1.3",
    "graphql": "^16.7.1",
    "graphql-type-json": "^0.3.2",
    "heroku-ssl-redirect": "0.0.4",
    "infisical-node": "^1.4.3",
    "ioredis": "^5.3.2",
    "jsonwebtoken": "^9.0.1",
    "lodash": "^4.17.21",
    "material-icons": "^1.13.10",
    "migrate-mongo": "^10.0.0",
    "mime-types": "^2.1.35",
    "mongoose": "^7.4.0",
    "nest-commander": "^3.11.1",
    "newrelic": "^11.2.1",
    "ngx-color-picker": "^15.0.0",
    "ngx-cookie-service": "^16.0.0",
    "object-hash": "^3.0.0",
    "parse-redis-url-simple": "^1.0.2",
    "pdf-parse": "^1.1.1",
    "pdfreader": "^3.0.0",
    "puppeteer": "^10.4.0",
    "reflect-metadata": "^0.1.13",
    "rxjs": "~7.8.0",
    "svix": "^1.7.0",
    "swiper": "^10.3.1",
    "tslib": "^2.3.0",
    "zone.js": "~0.13.0"
  }
}

[bmayen]

I'm also experiencing this with sdkClass option enabled. Disabling it works but is obviously a less-than-ideal solution.

[bmayen]

Setting strictNullChecks to false also gets around this, but also not an ideal solution.

[ciekawy]

should this issue be reopen or new one created? I still see this issue for 6.0.0 and sdkClass enabled in generator

[ciekawy]

for anyone getting here in regard to graphql-codegen - there is opened issue with draft open PR in corresponding project https://github.com/dotansimha/graphql-code-generator-community/issues/305