The Intersection of GraphQL & Design Systems in Product Dev.
summary
Demo of a local GraphQL-first dev loop called Prep Station that spins up a mock Gateway with subgraphs (Yoga, Hive) and plugs into storybook so UI, schema and mocks evolve together. Teams prototype queries, mutations and federated extensions, override subgraphs locally, and run story-based integration tests. Result: UI is typically 80–90% complete before backend work starts, front-end engineers finish the final 10% and design system contributions land earlier.
AI-written summary · about
chapters (21)
- 0:00Introduction and speakers
- 1:25Toast platform overview
- 3:30Mise en place analogy
- 4:11Feature development challenges
- 6:00Introducing Prep Station
- 8:00Setting up Prep Station
- 9:09Building the checklist component
- 10:15Adding data and mutations
- 11:41Stakeholder feedback loop
- 12:42Federation in Prep Station
- 13:25Extending chef with checklist
- 14:53Schema overrides for mock data
- 16:16Benefits of Prep Station
- 17:21Live scheduling app demo
- 18:25Mise en place Plus infrastructure
- 20:10Open sourcing Prep Station
- 21:14Advanced mocking techniques
- 22:48Figma integration discussion
- 23:10Team collaboration benefits
- 24:37Educating teams on Federation
- 25:03Q&A session
related talks
30mGraphQL Is a Superpower for Your Product Manager and Designer
27mHow GraphQL Gives Coding Agents Eyes on What Actually Matters
19mSupport unlimited customer experiences with GraphQL
55mGraphQL - APIs the New Way
32mFrom learning to thinking in GraphQL
31mReimagining the frontend-backend divide thanks to GraphQL
50mDistributed GraphQL APIs: Breaking Down Monoliths & Unlocking Agility for Dev Teams
56mDistributed GraphQL APIs