#vuecember2020 #graphql

GraphQL Codegen

Wer TypeScript sowie GraphQL verwendet, kann sich mit GraphQL Typensicherheit gegenüber der API ins Projekt holen!

GraphQL Codegen generiert nämlich TypeScript Typendefinitionen basierend auf einem GraphQL Schema. Diese Typendefinitionen helfen dann nicht nur in der IDE/dem Code-Editor während der Entwicklung, sondern auch via Linting z.B. in der Pipeline oder als pre-commit-hook dabei, das Schema der API nicht zu verletzen.

GraphQL Codegen lässt sich ganz einfach als NPM Package installieren und wird über eine YAML Datei konfiguriert.

Beispiel zur Installation mit Yarn (mehr dazu [hier[(https://graphql-code-generator.com/docs/getting-started/installation)).

yarn add -D @graphql-codegen/cli
yarn add -D @graphql-codegen/typescript

Danach legt man einfach eine Datei namens codegen.yml im Root-Verzeichnis des Projekts an und füllt sie mit folgendem Content:

schema: http://localhost:3000/graphql

generates: 
  ./src/api-types.d.ts: 
    plugins:
      - typescript

wobei localhost:3000 natürlich durch die entsprechende URL des GraphQL Endpunkts zu ersetzen ist.

Nun reicht ein einfacher Aufruf von

graphql-codegen

(der Befehl wird vom @graphql-codegen/cli Package bereitgestellt) und es werden die Typendefinitionen für das Schema unseres Endpunktes erstellt und in die Datei ./src/api-types.d.ts geschrieben.

Als besonders hilfreich hat sich hierbei noch die Option typesPrefix des TypeScript-Codegen Plugins herausgestellt.

Beispiel:

schema: http://localhost:3000/graphql

generates:
  ./src/api-types.d.ts:

    plugins:
      - typescript

  config:
    typesPrefix: Api

Damit haben alle Typendefinitionen die auf Basis des GraphQL Schemas Definiert wurden, das Präfix Api.

Das ist praktisch, um Kollisionen mit eigenen Typescript Typendefinitionen zu verhindern.

Spätestens wenn man zwei oder mehr APIs anbindet und für alle APIs Typen generieren möchte, kommt man nicht umhin ein Präfix zu setzen.

Mehr Informationen, eine Live-Demo und eine noch viel detailliertere Installationsanleitung findet Ihr hier.