search

tnc-ca-geo / animl-api

Backend for https://animl.camera
4 stars 0 forks source link

TypeScript: 3. Auto-generate TS interfaces from GraphQL type-defs #195

Closed alukach closed 3 weeks ago

alukach commented 3 weeks ago

What I'm changing

This PR converts our GraphQL types to TS files and configures tooling to auto-generate TypeScript interfaces for the GraphQL API.

How I did it

This looks very easy but it took me quite a while to get right. It's one of those things that can be done correctly one way and done incorrectly many many ways. 🤕

  1. Convert all type-defs/* files to .ts
  2. Add /* GraphQL */ to the GraphQL type definitions. This instructs modern code editors (eg VSCode) and Prettier to style the strings as GraphQL documents. More importantly, it also informs @graphql-codegen that the strings are GraphQL documents. This seems like a cosmetic detail, but is critical in order for the GraphQL Codegen to work properly.
  3. Add @graphql-codegen dependency and codegen.ts script in order to auto-generate types in src/@types/graphql.ts. Setup npm run codegen to run script.
  4. Add Github actions workflow to verify that generated GraphQL types are committed to the repo

How you can test it

  1. npm install --dev
  2. npm run codegen

relates to #187

[!NOTE] This PR builds off of the work done in #189. As such, #189 should be merged before this PR and this PR's target should be update to main before merging.