5 Antipatterns that Made Our React/GraphQL App Slow (And How We Fixed Them)
summary
Strips down GraphQL queries to remove unused fields and reduces payload and response time — a shown case cuts size by 31% payload, 22% latency — and avoids centralized bloated fragments by colocating fragments with their queries. Use server filters/pagination so a list renders with one query instead of 80+ rather than issuing per-item fetches. Use mutation return values and optimistic updates show change immediately to eliminate extra refetches. Switch to a normalized-cache client (Apollo or urql) so related UI updates automatically; loading spinners stop.
AI-written summary · about
chapters (8)
- 0:00React/GraphQL performance issues
- 1:17Over-fetching in GraphQL
- 4:35Fragments causing over-fetching
- 7:43Under-fetching and API requests
- 11:53Mutation return values
- 16:56Optimistic updates
- 17:39Wrong caching library
- 21:06Summary
related talks
22m5 Antipatterns that Made Our React/GraphQL App Slow (And How We Fixed Them)
25mOptimizing GraphQL Applications
52mState management in a GraphQL era
27mReact State Management In a GraphQL Era
26mBuild a performance-optimized GraphQL API
30mReact & GraphQL - Bringing Simplicity and Correctness to Client Side Development
28mGraphQLifying React Native App
20mColocating & Composing Data Dependencies with Fragments