Author: Erwin Wilson Ceniza

Published: July 2, 2026

Tags: GraphQL | HotChocolate | BatchDataLoader | CQRS | Outbox Pattern | Apollo Federation | .NET | Architecture | EMR | API Design

GraphQL Query & Mutation Architecture - A Production Deep Dive

Code-first GraphQL with HotChocolate, BatchDataLoader, CQRS, and a transactional outbox pattern, with real examples from a production EMR system serving three portals from a single schema.

Table of Contents

1. Interactive Data Traversal
2. The Architecture at 30,000 Feet
3. Why GraphQL Won for Healthcare Data Shapes
4. Simple Queries vs. Complex REST, The Comparison That Sold Me
5. The Resolver Layer, Code-First, Schema-Last
6. How GraphQL Smoothly Orchestrates the Application Services
7. N+1 Is the Silent Killer, How BatchDataLoaders Eliminate It
8. Mutation Architecture - CQRS + Transactional Outbox
9. Security at the Resolver Level, Custom Middleware Attributes
10. Type Extensions, Why I Stopped Writing DTO Mappers
11. Projections, Filtering, Sorting, and Paging
12. Apollo Federation, Future-Proofing the Graph
13. GraphQL Client on Mobile, Sharing Query Logic Across Portals
14. Why I Chose Ionic for the Patient Mobile App
15. The Retrospective, What I'd Keep and What I'd Change

A step-by-step walkthrough of how the app consumes (reads) and creates (writes) data through the services.

interactive
<script type="module">
const C = document.currentScript.parentElement;
C.style.cssText='width:100%;font-family:system-ui,-apple-system,sans-serif';

const S = document.createElement('style');
S.textContent=`
.gv *{box-sizing:border-box;margin:0;padding:0}
.gv{background:var(--bg-secondary,#111);border-radius:12px;overflow:hidden;border:1px solid var(--border,#333);min-height:440px}
.gv-tabs{display:flex;border-bottom:1px solid var(--border,#333);background:var(--bg-card,#1a1a1a)}
.gv-tab{flex:1;padding:12px 8px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;cursor:pointer;border:none;background:none;color:var(--text-muted,#666);transition:all .2s;border-bottom:2px solid transparent}
.gv-tab:hover{color:var(--text-seconda