TypedDocumentNode and typescript-apollo-angular

[MikaStark]

2.6.0 is released and with it TypedDocumentNode compatibility. But how am i supposed to use it ?

I naively install this packages :

{
    "@graphql-codegen/cli": "^1.21.5",
    "@graphql-codegen/typed-document-node": "^1.18.6",
    "@graphql-codegen/typescript": "^1.22.1",
    "@graphql-codegen/typescript-apollo-angular": "^2.3.1",
    "@graphql-codegen/typescript-operations": "^1.18.0",
    "@graphql-typed-document-node/core": "^3.1.0",
}

With this codegen.yml file

overwrite: true
schema: "http://localhost:4000"
documents: "src/**/*.graphql"
generates:
  src/app/core/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      # - "typescript-apollo-angular"
      - "typed-document-node"

Note that I have commented typescript-apollo-angular because of generation conflict.

And, naturaly, it doesn't generate all query/mutation/subscription services. So before I start migrating my code from using query/mutation/subscription services to basic apollo service use, am I doing something wrong ? Is there a way to generate services that will use TypedDocumentNode ? Are services useless now that query are automatically typed ?

[dotansimha]

Hi!
You can't use both since they will conflict. You should use only typed-document-node.
Then, when you use the generate ...Document variable with your Apollo-Angular instance, it will be typed automatically. No need for typescript-apollo-angular.

[MikaStark]

In my opinion, typed-document-node is far better as it provided typed gql queries/mutations/subscriptions. You can use it directly with Apollo service and get everything working fine. Generating services is like killing a worm with a bazooka. In one sentence, less code same behavior easier to maintain

[dotansimha]

@MikaStark I agree. It makes bundle size smaller, and reduces a lot of boilerplate.
I would also recommend you to use this codegen preset: https://www.graphql-code-generator.com/plugins/gql-tag-operations-preset , I think it provides the ideal setup.

[the-ult]

That sounds great.
Would be nice if the docs would provide the recommended way with some samples.

[MikaStark]

Here is my own setup now, maybe it can help :)

package.json

{
  "scripts": {
    "generate": "graphql-codegen"
  },
  "devDependencies": {
     "@graphql-codegen/cli": "^2.0.1",
     "@graphql-codegen/typed-document-node": "^2.0.0",
     "@graphql-codegen/typescript": "^2.0.0",
     "@graphql-codegen/typescript-operations": "^2.0.1",
     "@graphql-typed-document-node/core": "^3.1.0"
  }
}

codegen.yml

overwrite: true
schema: ${SCHEMA:"http://localhost:4000/graphql"}
documents: "src/**/*.graphql"
generates:
  src/app/core/graphql.ts:
    plugins:
      - "typescript"
      - "typescript-operations"
      - "typed-document-node"

The only two things you have to do are :

• Create .graphql files containing your requests inside your src/ folder
  • You should create one file per request
  • You should put yours .graphql files inside a graphql/ folder in the proper folder (example: if you are building a blog, put all your post-related requests inside a graphql folder inside the Post module folder)
• Run npm run generate to launch codegen. Iy will generate a graphql.ts file inside the src/app/core folder. You can easily use it accross your project. If your API change, re-run the generate command

I don't want to offense anyone, but query/mutation/subscription services should be deprecated in favor of typed documents

[the-ult]

Just wondering.
When using typed-document-node you'll won't be able to use Observables.
The generated typescript-apollo-angular services return an Observable with fetch

So when using typed-document-node you'll have to await them first and then wrap them or something like that. Correct?
For example, when you are calling a query within an observable (with switchMap or something)