{"id":12,"date":"2026-06-06T21:48:24","date_gmt":"2026-06-06T21:48:24","guid":{"rendered":"https:\/\/softwareproduction.eu\/wordpress\/?p=12"},"modified":"2026-06-07T01:21:43","modified_gmt":"2026-06-07T01:21:43","slug":"graphql-based-code-generation-eliminating-all-boilerplate","status":"publish","type":"post","link":"https:\/\/softwareproduction.eu\/?p=12","title":{"rendered":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate"},"content":{"rendered":"\n

Fifth in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Covers architecture, code generation, performance, infrastructure, and the automation philosophy behind every decision.<\/em><\/p>\n\n\n\n

\n\n\n\n

The Old Way: Manual Everything<\/h2>\n\n\n\n

In most REST-based frontends used in large enterprise applications, adding a new API call follows the same ritual:<\/p>\n\n\n\n

    \n
  1. Write the fetch call with the correct URL, headers, and query parameters <\/li>\n
  2. Define a TypeScript interface for the response <\/li>\n
  3. Write a mapping function to transform the raw response into the interface <\/li>\n
  4. Handle loading state, error state, and retry logic <\/li>\n
  5. Wire it into the component’s reactive state <\/li>\n<\/ol>\n\n\n\n

    Multiply that by 50 endpoints and a substantial chunk of the codebase becomes pure boilerplate \u2014 code that adds no business value and only exists to glue the frontend to the backend.<\/p>\n\n\n\n

    This hand-written translation layer is also a reliable source of bugs<\/strong>. A renamed field in the backend silently breaks the frontend. A new enum value slips in and produces a runtime error. A date format change suddenly corrupts form displays. These failures often surface only in production, because the TypeScript compiler cannot validate your types against a schema that lives elsewhere.<\/p>\n\n\n\n

    \n\n\n\n

    The New Way: Write GraphQL, Get Everything<\/h2>\n\n\n\n

    A more modern workflow removes the manual layer entirely:<\/p>\n\n\n\n

    flowchart TB\n  A[\"Developer writes<br\/>.graphql query file\"] -->|\"yarn gen\"| B[Code Generator]\n  B --> B1[\"useProductOffersQuery.ts<br\/>(reactive composable<br\/>useAsyncData + loading + error<br\/>typed variables & result)\"]\n  B --> B2[\"useProductOffersClient.ts<br\/>(low-level client<br\/>manual execution,<br\/>no reactive wrapper)\"]\n  B --> B3[\"ProductOffersDocument.ts<br\/>(typed document node<br\/>operation + types<br\/>for Apollo)\"]\n  B1 --> C[\"Developer uses in component<br\/>const { data, pending, error } = useProductOffersQuery({ zip })<br\/>data is fully typed\"]<\/pre>\n\n\n\n
    The developer writes a .graphql<\/code> file. The generator turns it into fully typed composables that are auto-imported \u2014 no manual imports. The TypeScript compiler now has full knowledge of every field, every type, and every nullable boundary.<\/p>\n\n\n\n
    \n\n\n\n
    Three Files Per Operation<\/h2>\n\n\n\n
    For each GraphQL operation, the generator emits three files, each optimized for a different usage pattern.<\/p>\n\n\n\n
    1. The Reactive Composable (useProductOffersQuery.ts<\/code>)<\/h3>\n\n\n\n
    This is the primary API for Vue components. It wraps Nuxt\u2019s useAsyncData<\/code> around the GraphQL operation and provides:<\/p>\n\n\n\n
      \n
    • Typed variables<\/strong> \u2014 the function signature accepts exactly the variables the query defines  <\/li>\n
    • Typed result<\/strong> \u2014 data.value<\/code> matches the query\u2019s return shape, including nullability from the schema  <\/li>\n
    • SSR-safe execution<\/strong> \u2014 runs on the server during SSR, serializes the result into the Nuxt payload, and hydrates on the client without a second fetch  <\/li>\n
    • Reactive refetching<\/strong> \u2014 changing a variable automatically triggers a fresh query  <\/li>\n
    • Loading and error states<\/strong> \u2014 pending<\/code>, error<\/code>, and status<\/code> refs are handled for you  <\/li>\n<\/ul>\n\n\n\n
      2. The Client Composable (useProductOffersClient.ts<\/code>)<\/h3>\n\n\n\n
      For imperative flows \u2014 form submissions, button clicks, conditional fetches \u2014 where you want to trigger the query manually instead of reactively:<\/p>\n\n\n\n
      const { execute } = useProductOffersClient()\n\nasync function onSubmit() {\n  const result = await execute({ zip: '10115' })\n  \/\/ result is fully typed\n}<\/code><\/pre>\n\n\n\n
      3. The Document Node (ProductOffersDocument.ts<\/code>)<\/h3>\n\n\n\n
      The raw typed document node used for advanced integration points \u2014 custom Apollo links, direct cache access, or any place that expects a DocumentNode<\/code>.<\/p>\n\n\n\n
      \n\n\n\n
      Rich Text Fragment Generation<\/h2>\n\n\n\n
      Headless CMS rich text fields are one of the trickiest parts of code generation. In GraphQL, rich text is not a plain string \u2014 it is a deeply nested JSON tree with typed links to entries and assets.<\/p>\n\n\n\n
      The key problem: each content type\u2019s rich text field has its own link types<\/strong>. A SectionText<\/code> field references SectionTextLinks<\/code>. A MediaDescription<\/code> field uses MediaDescriptionLinks<\/code>. Structurally they are identical, but the type names differ, which prevents you from writing a single reusable fragment by hand.<\/p>\n\n\n\n
      The solution is a custom generator that identifies rich text fields<\/strong> by their structural pattern \u2014 a type that has both json: JSON!<\/code> and links: [TypeName]Links!<\/code> \u2014 and then emits shared fragments automatically:<\/p>\n\n\n\n
      flowchart TB\n  subgraph Detection\n    D[\"Type with<br\/>json: JSON!<br\/>links: SectionTextLinks!\"] --> E[\"Recognized<br\/>as rich text field\"]\n    E --> F[\"Generate<br\/>sectionText.fragment.graphql\"]\n  end\n\n  subgraph \"Generated fragment includes\"\n    F --> G[\"json<br\/>(rich text content tree)\"]\n    F --> H[links]\n    H --> I[assets]\n    I --> I1[\"block<br\/>(images, files)\"]\n    I --> I2[\"hyperlink<br\/>(linked assets)\"]\n    H --> J[entries]\n    J --> J1[\"inline<br\/>(embedded entries)\"]\n    J --> J2[\"hyperlink<br\/>(linked entries)\"]\n    J --> J3[\"block<br\/>(embedded entry blocks)\"]\n    H --> K[\"resources<br\/>(external resources)\"]\n  end<\/pre>\n\n\n\n
      Queries can then pull in these fragments:<\/p>\n\n\n\n
      #import \".\/fragments\/sectionText.fragment.graphql\"\n\nquery PageContent($path: String!) {\n  page(path: $path) {\n    title\n    body { ...SectionText }   # \u2190 comprehensive rich text, one line\n  }\n}<\/code><\/pre>\n\n\n\n
      This removes hundreds of lines of duplicated GraphQL across dozens of queries. When the rich text schema evolves \u2014 for example, to support a new embedded entry type \u2014 you update the generator once and every query benefits.<\/p>\n\n\n\n
      \n\n\n\n
      Possible Types Introspection<\/h2>\n\n\n\n
      GraphQL unions and interfaces require the client to know which concrete types implement them. Without that knowledge, Apollo\u2019s cache cannot resolve __typename<\/code> correctly and fragment matching breaks in subtle ways.<\/p>\n\n\n\n
      At build time, the generator runs an introspection query against each subgraph and produces a possibleTypes<\/code> map:<\/p>\n\n\n\n
      \/\/ Generated: cms-possible-types.ts\nexport const cmsPossibleTypes = {\n  Entry: ['Page', 'Section', 'Teaser', 'FAQ', 'NavigationItem', ...],\n  Asset: ['Asset'],\n  _Node: ['Page', 'Section', ...],\n}<\/code><\/pre>\n\n\n\n
      This map is passed into Apollo\u2019s InMemoryCache<\/code> configuration. Fragment matching becomes deterministic and correct, with no runtime probing required \u2014 the types are known ahead of time.<\/p>\n\n\n\n
      flowchart LR\n  A[GraphQL Subgraph Schema] --> B[\"Introspection Query<br\/>(build time)\"]\n  B --> C[cmsPossibleTypes Map]\n  C --> D[\"Apollo InMemoryCache<br\/>possibleTypes config\"]\n  D --> E[\"Correct fragment matching<br\/>(__typename resolved)\"]<\/pre>\n\n\n\n
      \n\n\n\n
      The Developer Experience Difference<\/h2>\n\n\n\n
      Aspect<\/th>Manual REST Approach<\/th>Generated GraphQL<\/th><\/tr><\/thead>
      New API call<\/strong><\/td>Write fetch + interface + mapper + error handling<\/td>Write .graphql<\/code> file, run yarn gen<\/code><\/td><\/tr>
      Field rename<\/strong><\/td>Silent runtime breakage<\/td>TypeScript compiler error at build time<\/td><\/tr>
      New field<\/strong><\/td>Update interface, mapper, and component<\/td>Add field to .graphql<\/code> file, regenerate<\/td><\/tr>
      Type safety<\/strong><\/td>Hand-written, often stale<\/td>Generated from schema, always in sync<\/td><\/tr>
      SSR handling<\/strong><\/td>Custom useAsyncData<\/code> wrapper per call<\/td>Built into generated composable<\/td><\/tr>
      Import management<\/strong><\/td>Manual imports in every component<\/td>Auto-imported by Nuxt<\/td><\/tr>
      Rich text queries<\/strong><\/td>Copy-paste 30 lines per field<\/td>Single fragment reference<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n
      flowchart TB\n  subgraph ManualREST[\"Manual REST Approach\"]\n    MR1[\"New API call:<br\/>fetch + interface + mapper\"] \n    MR2[\"Field rename:<br\/>runtime breakage\"]\n    MR3[\"Type safety:<br\/>hand-written types\"]\n  end\n\n  subgraph GenGQL[\"Generated GraphQL\"]\n    GG1[\"New API call:<br\/>write .graphql + yarn gen\"]\n    GG2[\"Field rename:<br\/>TS compiler error\"]\n    GG3[\"Type safety:<br\/>schema-driven\"]\n  end\n\n  MR1 --> MR2 --> MR3\n  GG1 --> GG2 --> GG3<\/pre>\n\n\n\n
      \n\n\n\n
      Build-Time vs. Runtime Generation<\/h2>\n\n\n\n
      All generation is build-time<\/strong>. The generator outputs TypeScript files that the compiler type-checks, the bundler tree-shakes, and your IDE fully understands.<\/p>\n\n\n\n
      flowchart TB\n  A[\"Schema Introspection<br\/>(per subgraph)\"] --> B[GraphQL Code Generator]\n  B --> C[\"TypeScript types<br\/>from schema\"]\n  B --> D[\"Composables<br\/>from .graphql files\"]\n  B --> E[Rich text fragments]\n  B --> F[Possible types map]\n  C --> G[TypeScript Compilation]\n  D --> G\n  E --> G\n  F --> G\n  G --> H[Vite Bundle]\n  H --> I[Tree-shakes unused operations]\n  G --> J[Catches schema-query mismatches]<\/pre>\n\n\n\n
      During development (yarn dev<\/code>), the generator runs in watch mode on .graphql<\/code> files. Save a query file \u2192 codegen re-runs \u2192 new types appear \u2192 IDE autocompletion updates. The feedback loop is effectively instantaneous.<\/p>\n\n\n\n
      \n\n\n\n
      Lessons Learned<\/h2>\n\n\n\n
      The schema is the single source of truth<\/h3>\n\n\n\n
      When every frontend type, field, and nullable boundary is derived from the backend schema, the schema becomes the contract. Breaking changes surface as compile-time errors instead of 2 AM production incidents. This is not just convenience \u2014 it is about ensuring correctness.<\/p>\n\n\n\n
      flowchart LR\n  S[\"GraphQL Schema<br\/>(single source of truth)\"] --> G[\"Generated Types & Composables\"]\n  G --> F[Frontend Code]\n  S -. breaking change .-> G\n  G -. compile-time error .-> F<\/pre>\n\n\n\n
      Rich text is the hardest part of CMS integration<\/h3>\n\n\n\n
      If you are integrating a headless CMS via GraphQL, budget serious effort for rich text. The deeply nested trees and type-specific link structures present a code generation challenge that generic tools like graphql-codegen<\/code> do not handle out of the box. Custom generators that detect and encapsulate rich text patterns pay off immediately.<\/p>\n\n\n\n
      Auto-imports change the economics of small composables<\/h3>\n\n\n\n
      When every generated composable is auto-imported, the marginal cost of a new one drops to zero. That encourages the right level of granularity \u2014 one query per use case, instead of bloated, multi-purpose queries that fetch everything. Smaller queries lead to smaller cache entries, faster invalidation, and better tree-shaking.<\/p>\n\n\n\n
      flowchart TB\n  A[\"Generate composable<br\/>per .graphql operation\"] --> B[Nuxt auto-imports]\n  B --> C[\"Zero-cost usage<br\/>in components\"]\n  C --> D[Many small, focused queries]\n  D --> E[Smaller cache entries]\n  D --> F[Better tree-shaking]\n  D --> G[Faster invalidation]<\/pre>\n\n\n\n
      Generation should be invisible in the happy path<\/h3>\n\n\n\n
      The best code generation dissolves into the developer experience. You write a .graphql<\/code> file, hit save, and your IDE instantly offers typed autocompletion. Codegen should run automatically in dev and as part of CI. If developers must remember to run a command manually, they will forget.<\/p>\n\n\n\n
      sequenceDiagram\n  participant Dev as Developer\n  participant IDE as IDE\n  participant Gen as Code Generator\n  participant CI as CI Pipeline\n\n  Dev->>IDE: Edit .graphql file\n  IDE->>Gen: File change detected\n  Gen-->>IDE: Regenerate types & composables\n  IDE-->>Dev: Updated autocomplete & types\n\n  CI->>Gen: Run codegen on push\n  Gen-->>CI: Generated artifacts\n  CI-->>CI: Type-check & build with generated code<\/pre>\n\n\n\n
      \n\n\n\n
      What’s Next<\/h2>\n\n\n\n
        \n
      • Article 4<\/strong>: Nuxt-Based Code Generation \u2014 The GQLT and I18NT Modules<\/em> \u2014 Build-time code generation that turns YAML and GraphQL into auto-imported, type-safe APIs.  <\/li>\n
      • Article 5<\/strong>: Nuxt and Headless CMS \u2014 Why It’s Hard and How We Made It Work<\/em> \u2014 Content-driven routing, dynamic component rendering, and the preview system.  <\/li>\n
      • Article 6<\/strong>: Performance Optimization \u2014 Chasing That 100% Lighthouse Score<\/em> \u2014 Multi-tier caching, deferred hydration, and the performance techniques that add up to near-perfect scores.  <\/li>\n<\/ul>\n\n\n\n
        \n\n\n\n
        Munir Husseini is a software architect specializing in full-stack TypeScript, .NET, and cloud-native architectures.<\/em><\/p>\n","protected":false},"excerpt":{"rendered":"
        Fifth in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Covers architecture, code generation, performance, infrastructure, and the automation philosophy behind every decision. The Old Way: Manual Everything In most REST-based frontends used in large enterprise applications, adding a new API call follows the same ritual: Write the fetch call […]<\/p>\n","protected":false},"author":1,"featured_media":218,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[5],"tags":[],"class_list":["post-12","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-advanced-web-app-with-nuxt-and-net"],"yoast_head":"\nGraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/softwareproduction.eu\/?p=12\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production\" \/>\n<meta property=\"og:description\" content=\"Fifth in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Covers architecture, code generation, performance, infrastructure, and the automation philosophy behind every decision. The Old Way: Manual Everything In most REST-based frontends used in large enterprise applications, adding a new API call follows the same ritual: Write the fetch call […]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/softwareproduction.eu\/?p=12\" \/>\n<meta property=\"og:site_name\" content=\"Software Production\" \/>\n<meta property=\"article:published_time\" content=\"2026-06-06T21:48:24+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-06-07T01:21:43+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"1880\" \/>\n\t<meta property=\"og:image:height\" content=\"1058\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Munir Husseini\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Munir Husseini\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"9 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12\"},\"author\":{\"name\":\"Munir Husseini\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\"},\"headline\":\"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate\",\"datePublished\":\"2026-06-06T21:48:24+00:00\",\"dateModified\":\"2026-06-07T01:21:43+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12\"},\"wordCount\":1071,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/05-graphql-code-generation.jpg\",\"articleSection\":[\"Advanced Web App with Nuxt and .NET\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12\",\"name\":\"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/05-graphql-code-generation.jpg\",\"datePublished\":\"2026-06-06T21:48:24+00:00\",\"dateModified\":\"2026-06-07T01:21:43+00:00\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/softwareproduction.eu\\\/?p=12\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#primaryimage\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/05-graphql-code-generation.jpg\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/06\\\/05-graphql-code-generation.jpg\",\"width\":1880,\"height\":1058},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/?p=12#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/softwareproduction.eu\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#website\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"name\":\"Softwareproduction\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/softwareproduction.eu\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#organization\",\"name\":\"Munir Husseini\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"contentUrl\":\"https:\\\/\\\/softwareproduction.eu\\\/wordpress\\\/wp-content\\\/uploads\\\/2026\\\/05\\\/softwareproduction-logo-32.png\",\"width\":32,\"height\":32,\"caption\":\"Munir Husseini\"},\"image\":{\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/softwareproduction.eu\\\/#\\\/schema\\\/person\\\/fec48f54713e1bd117640fb9b748802f\",\"name\":\"Munir Husseini\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g\",\"caption\":\"Munir Husseini\"},\"sameAs\":[\"https:\\\/\\\/softwareproduction.eu\\\/\"],\"url\":\"https:\\\/\\\/softwareproduction.eu\\\/?author=1\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/softwareproduction.eu\/?p=12","og_locale":"en_US","og_type":"article","og_title":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production","og_description":"Fifth in a series about migrating from legacy architectures to a modern Nuxt 4 stack. Covers architecture, code generation, performance, infrastructure, and the automation philosophy behind every decision. The Old Way: Manual Everything In most REST-based frontends used in large enterprise applications, adding a new API call follows the same ritual: Write the fetch call […]","og_url":"https:\/\/softwareproduction.eu\/?p=12","og_site_name":"Software Production","article_published_time":"2026-06-06T21:48:24+00:00","article_modified_time":"2026-06-07T01:21:43+00:00","og_image":[{"width":1880,"height":1058,"url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","type":"image\/jpeg"}],"author":"Munir Husseini","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Munir Husseini","Est. reading time":"9 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/softwareproduction.eu\/?p=12#article","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/?p=12"},"author":{"name":"Munir Husseini","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f"},"headline":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate","datePublished":"2026-06-06T21:48:24+00:00","dateModified":"2026-06-07T01:21:43+00:00","mainEntityOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=12"},"wordCount":1071,"commentCount":0,"publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=12#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","articleSection":["Advanced Web App with Nuxt and .NET"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/softwareproduction.eu\/?p=12#respond"]}]},{"@type":"WebPage","@id":"https:\/\/softwareproduction.eu\/?p=12","url":"https:\/\/softwareproduction.eu\/?p=12","name":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate - Software Production","isPartOf":{"@id":"https:\/\/softwareproduction.eu\/#website"},"primaryImageOfPage":{"@id":"https:\/\/softwareproduction.eu\/?p=12#primaryimage"},"image":{"@id":"https:\/\/softwareproduction.eu\/?p=12#primaryimage"},"thumbnailUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","datePublished":"2026-06-06T21:48:24+00:00","dateModified":"2026-06-07T01:21:43+00:00","breadcrumb":{"@id":"https:\/\/softwareproduction.eu\/?p=12#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/softwareproduction.eu\/?p=12"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/?p=12#primaryimage","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","width":1880,"height":1058},{"@type":"BreadcrumbList","@id":"https:\/\/softwareproduction.eu\/?p=12#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/softwareproduction.eu\/"},{"@type":"ListItem","position":2,"name":"GraphQL-Based Code Generation \u2014 Eliminating All Boilerplate"}]},{"@type":"WebSite","@id":"https:\/\/softwareproduction.eu\/#website","url":"https:\/\/softwareproduction.eu\/","name":"Softwareproduction","description":"","publisher":{"@id":"https:\/\/softwareproduction.eu\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/softwareproduction.eu\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/softwareproduction.eu\/#organization","name":"Munir Husseini","url":"https:\/\/softwareproduction.eu\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/","url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","contentUrl":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/05\/softwareproduction-logo-32.png","width":32,"height":32,"caption":"Munir Husseini"},"image":{"@id":"https:\/\/softwareproduction.eu\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/softwareproduction.eu\/#\/schema\/person\/fec48f54713e1bd117640fb9b748802f","name":"Munir Husseini","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b07845732d4d7bddfc43e608ae6662d564a14b35706dfae0c9610071d978f54e?s=96&d=mm&r=g","caption":"Munir Husseini"},"sameAs":["https:\/\/softwareproduction.eu\/"],"url":"https:\/\/softwareproduction.eu\/?author=1"}]}},"jetpack_featured_media_url":"https:\/\/softwareproduction.eu\/wordpress\/wp-content\/uploads\/2026\/06\/05-graphql-code-generation.jpg","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/12","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=12"}],"version-history":[{"count":8,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/12\/revisions"}],"predecessor-version":[{"id":219,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/posts\/12\/revisions\/219"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=\/wp\/v2\/media\/218"}],"wp:attachment":[{"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=12"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=12"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/softwareproduction.eu\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=12"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}