Sample Monorepo GraphQL Codegen project

🛠️ This is a sample project using @ambroos/graphql-codegen-preset-monorepo-client

✨ This workspace has been generated by Nx, a Smart, fast and extensible build system. ✨

First things first

npm install

Start the app

To start the development server run nx serve countries-app. Open your browser and navigate to http://localhost:4200/.

Build the app

To build the app run nx build countries-app. The build will be stored in the dist/ directory.

You can look at the generated JS to see that the original GraphQL query strings have been replaced by generated objects (search for CountryInfo). If you comment out the graphql-codegen-client-preset-swc-plugin plugin in vite.config.ts, you'll see that the generated code suddenly contains every GraphQL query/fragment definition string twice, along with the document object.

If either the schema or the source files change, graphql-codegen will automatically be called before the build, and only for the relevant projects!

Run GraphQL codegen

npx nx run-many -t graphql-codegen, optionally with --skip-nx-cache (cache will automatically be invalidated when the schema changes, source files or config change)

Update schema

The schema is saved to libs/graphql-schema/schema.graphql. To update it, run nx g get-graphql-schema. This gives some interesting opportunities for automated schema syncing. Set up a way to do this periodically for your repo, run the graphql-codegen executor for your repo, and check if TypeScript is still happy. If it isn't, someone made an incompatible change to the schema and you can go ask them to fix it!

Interesting files

countriesList.tsx in the app shows most of the actual benefits of the generated code. You get fully typed responses, fragments, and query filters.

• apps/countries-app/codegen.ts (graphql-codegen config)
• apps/countries-app/src/app/CountriesList.tsx and countriesInfo.tsx (generated types are used heavily here)
• apps/countries-app/src/gql (generated query/fragment types)
• apps/countries-app/vite.config.ts (graphql-codegen-client-preset-swc-plugin config)
• libs/graphql-schema/codegen.ts (graphql-codegen config)
• libs/graphql-schema/src/gql (generated schema types)