Colocating & Composing Data Dependencies with Fragments
summary
Argues for colocating GraphQL fragments on components and composing them into root queries, demonstrating an Apollo Server + React demo, GraphQL Codegen for types, and Relay Operation Optimizer for fragment args. Shows a harmful legacy fragment used in 73 places that expands to over 100 fields, slowing trivial pages; refactors item and nutrition card fragments into components, composes them at query roots, and yields precise TypeScript types and much less overfetching. Apollo Server and React
AI-written summary · about
chapters (10)
- 0:00Introduction
- 1:50Why GraphQL fragments
- 5:17Fragment best practices
- 7:03Live demo setup
- 9:33Problem with generic fragments
- 10:16Collocating fragments with components
- 13:51Composing fragments into queries
- 16:28Benefits of component-level fragments
- 17:12Advantages of this approach
- 18:38Future improvements and tools
related talks
58mApolloClient or Relay with Fragments, ‘Hairy’ GraphQL and TypeScript
30mReact & GraphQL - Bringing Simplicity and Correctness to Client Side Development
22m5 Antipatterns that Made Our React/GraphQL App Slow (And How We Fixed Them)
30mGraphQL in the Era of React Server Components
47mReact, Relay and GraphQL — a perfectly normal component approach
29mWrite Queries, Not Code
24mRethinking frontend architectures with data layers
24mModern Apollo Client React