Graphql-code-generator: Unable to find template plugin matching typescript-operations

[warrendodsworth]

Describe the bug
New Angular Cli project
Run npm init
run
standard install

To Reproduce
Steps to reproduce the behavior:

1. My GraphQL schema:

2. too big

3. My GraphQL operations:

graphql-codegen init
graphql-codegen --config codegen.yml

1. My codegen.yml config file:

overwrite: true
schema: "http://apollot:8972/samples/graphql/service"
documents: "src/**/*.graphql"
generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"
      - "typescript-graphql-files-modules"

Expected behavior
Standard generate result

Environment:
"@graphql-codegen/typescript": "1.3.0",
"@graphql-codegen/typescript-apollo-angular": "1.3.0",
"@graphql-codegen/typescript-graphql-files-modules": "1.3.0",
"@graphql-codegen/typescript-operations": "1.3.0",

Global cli package @graphql-codegen/cli 1.3.0

• OS: Windows 10
• @graphql-codegen/...:
• NodeJS: 8.9.3

Additional context

[dotansimha]

Hi @warrendodsworth !
Are you sure all dependencies are installed correctly? Did you ran yarn or npm install after adding the plugins to package.json?
Can you please try to create a small reproduction in a repository?

[warrendodsworth]

Hi @dotansimha,
Thanks for getting back to me so quickly mate
Yes, I did run npm i after adding the plugins using graphql-codegen init

I've created a small repo to reproduce the issue
https://github.com/warrendodsworth/web-graphql-codegen-reproduce-bug

[dotansimha]

Hi @warrendodsworth , I noticed the following in your repo:

• Missing dependency @graphql-codegen/cli.
• typescript-graphql-files-modules requires extensions d.ts so I recommend using it separately.
• fragment-matcher is better used in a separate file.

You config should look like that:

generates:
  src/generated/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typescript-apollo-angular"

  src/generated/modules.d.ts:
    plugins:
      - typescript-graphql-files-modules

  src/generated/fragment-matcher.json:
    plugins:
      - "fragment-matcher"

I couldn't reproduce your issue with the reproduction repo. Tried with Node 10 and NPM (tried to install dependencies using yarn install and npm install) - it worked for me.

[capaj]

I got the same error just now. Installed this:

and my yaml looks like:

overwrite: true
schema: 'gqlSchemas/private.graphql'

generates:
  front-end/src/generated/graphql.ts:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'

[dotansimha]

@capaj can you please create a reproduction of it in a repo?

[deser]

Have somebody resolved the issue?

[dotansimha]

@deser if it happens to you, can you please share a reproduction in a repo? Because we couldn't reproduce it.

[Infonautica]

I had this problem, and it was caused by running wrong script.
I ran yarn gql-gen instead of new yarn graphql-codegen

[ajhool]

I had this problem and simply installed the packages globally using sudo yarn global add @graphql-codegen/typescript @graphql-codegen/typescript-graphql-files-modules @graphql-codegen/typescript-document-nodes @graphql-codegen/fragment-matcher. However, graphql-codegen is installed in the project and is called using a script in package.json.

[gomesalexandre]

Happens to me too, will report if I find a solution

$ gql-gen --config codegen.yml
  ✔ Parse configuration
  ❯ Generate outputs
    ❯ Generate src/graphql/generated.tsx
      ✔ Load GraphQL schemas
      ✔ Load GraphQL documents
      ✖ Generate
        → Unable to find template plugin ma
…


  Found 1 error

   ✖ src/graphql/generated.tsx
    Unable to find template plugin matching
 'typescript-operations'
    Install one of the following packages:


    - graphql-codegen-typescript-operations
    - 
graphql-codegen-typescript-operations-templ
ate
    - codegen-typescript-operations
    - codegen-typescript-operations-templat
e
    - typescript-operations


Something went wrong
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

For reference, my dev deps look like this

  "devDependencies": {
    "@graphql-codegen/cli": "^1.8.1",
    "@graphql-codegen/typescript": "^1.8.1",
    "@graphql-codegen/typescript-document-nodes": "^1.8.1",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.8.1",
    "@graphql-codegen/typescript-operations": "^1.8.1",
    "graphql-code-generator": "^0.18.2",
    "graphql-codegen-typescript-common": "0.18.2",
    "graphql-codegen-typescript-react-apollo": "0.18.2",
    "graphql-codegen-typescript-react-apollo-template": "^0.18.2"
  },

[gomesalexandre]

I encountered the same error and the reason was that I had both the new graphql-codegen namespaced packages, and the old ones (graphql-code-generator<-packageName>), resulting in a conflict:

  "devDependencies": {
    "@graphql-codegen/cli": "^1.8.1",
    "@graphql-codegen/typescript": "^1.8.1",
    "@graphql-codegen/typescript-document-nodes": "^1.8.1",
    "@graphql-codegen/typescript-graphql-files-modules": "^1.8.1",
    "@graphql-codegen/typescript-operations": "^1.8.1",
    "graphql-code-generator": "^0.18.2",
    "graphql-codegen-typescript-common": "0.18.2",
    "graphql-codegen-typescript-react-apollo": "0.18.2",
    "graphql-codegen-typescript-react-apollo-template": "^0.18.2"
  },

Removing the old ones solved it !

[Albert-Gao]

The issue for me is the init command added 3 packages which version is '0.0.0', updated the fields solved it,,

[crimson-med]

I had the same problem. I used to have "@graphql-codegen/typescript": "1.8.2", in my package.json and I now uninstalled the last version and added instead: "graphql-toolkit": "^0.7.5" and it seems to be working now. I think in the new update they changed the typescript templating

[tsujp]

I had the same error, re-running these commands (note I had to explicitly install change-case) fixed the issue.

npm i -D @graphql-codegen/typescript change-case

[bmingles]

I also had this issue. Re-installing @graphql-codegen/typescript after i had installed the apollo plugin fixed it.

[utegenovkamel]

And I get this error: Unable to find template plugin matching 'add'
_√ Parse configuration

Generate outputs
Generate src/__generated__/types.ts
√ Load GraphQL schemas
√ Load GraphQL documents
× Generate
→ Unable to find template plugin matching add
Generate to src/ (using EXPERIMENTAL preset "near-operation-file")
√ Load GraphQL schemas
√ Load GraphQL documents
× Generate
→ Unable to find template plugin matching add_

Found 2 errors

✖ src/__generated__/types.ts
Unable to find template plugin matching 'add'
Install one of the following packages:

- @graphql-codegen/add
- @graphql-codegen/add-template
- @graphql-codegen/add-plugin
- graphql-codegen-add
- graphql-codegen-add-template
- graphql-codegen-add-plugin
- codegen-add
- codegen-add-template
- add
Error: Unable to find template plugin matching add
    at getPluginByName (C:\Users\admon\Google Диск\Dev Design Job\Job\frontend.cabinet\node_modules\@graphql-codegen\cli\bin.js:298:11)
Error: Unable to find template plugin matching add
    at getPluginByName (C:\Users\admon\Google Диск\Dev Design Job\Job\frontend.cabinet\node_modules\@graphql-codegen\cli\bin.js:298:11)

✖ src/
Unable to find template plugin matching 'add'
Install one of the following packages:

- @graphql-codegen/add
- @graphql-codegen/add-template
- @graphql-codegen/add-plugin
- graphql-codegen-add
- graphql-codegen-add-template
- graphql-codegen-add-plugin
- codegen-add
- codegen-add-template
- add
Error: Unable to find template plugin matching add
    at getPluginByName (C:\Users\admon\Google Диск\Dev Design Job\Job\frontend.cabinet\node_modules\@graphql-codegen\cli\bin.js:298:11)
Error: Unable to find template plugin matching add
    at getPluginByName (C:\Users\admon\Google Диск\Dev Design Job\Job\frontend.cabinet\node_modules\@graphql-codegen\cli\bin.js:298:11)

Something went wrong
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] generate: graphql-codegen --config codegen.yml && npm run lint
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] generate script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:

[dotansimha]

@utegenovkamel if this is still relevant, can you please report this in a new issue with a reproduction?