graphql-code-generator-community icon indicating copy to clipboard operation
graphql-code-generator-community copied to clipboard

Generated files fail the angular es-lint rule - angular-eslint/prefer-inject

Open lcottingham opened this issue 4 months ago • 0 comments

Which packages are impacted by your issue?

@graphql-codegen/typescript-apollo-angular

Describe the bug

Latest default es-lint rules for angular push for the use of inject over constructor DI. Angular do have a migration script for this ng generate @angular/core:inject. The generated files from the codegen script use constructor injection over inject().

This is applicable for angular apps version 14+ only

Temporary workaround is to simply disable this for our generated .ts files with

{
    "files": [
        "**/__generated__/**/*.ts"
    ],
    "rules": {
        "@angular-eslint/prefer-inject": "off"
    }
}

Fix Take the current generated ts file format:

constructor(apollo: Apollo.Apollo) {
    super(apollo)
}

and make it more 'angular.'

import { Injectable, inject } from "@angular/core"

{...}

constructor() {
    const apollo = inject(Apollo.Apollo);
    super(apollo)
}

Your Example Website or App

//

Steps to Reproduce the Bug or Issue

  1. Run codegen on any graphql file
  2. Lint failing file generated

Expected behavior

constructor() {
    const apollo = inject(Apollo.Apollo);
    super(apollo)
}

Screenshots or Videos

No response

Platform

  • OS: MacOS
  • NodeJS: 22
  • graphql version: 16.10.*
  • @graphql-codegen/* version(s): 4.0.*

Codegen Config File

No response

Additional context

No response

lcottingham avatar Aug 01 '25 15:08 lcottingham