Modern Apollo Client React
summary
Built a production React app with Apollo Client v4 and TanStack Router, using GraphQL codegen (Guild) to enforce fragment co‑location. Router-level preloading populates the Apollo cache on hover, useLoadableQuery and useBackgroundQuery control when queries fire, and suspense fragments let components read only the fields they need. Optimistic mutations update a single field instantly and non‑reactive directives keep updates to a single re-render boundary, avoiding whole‑page rerenders.
AI-written summary · about
chapters (11)
- 0:00Introduction to Apollo V4
- 1:43Code generation benefits
- 3:57Preloading queries with TanStack
- 7:30Use loadable query feature
- 9:17Background query and waterfalls
- 11:09Fragment co-location explained
- 13:17Apollo cache and entities
- 14:20Optimistic UI updates
- 16:50Re-render boundaries
- 20:06Key takeaways and summary
- 20:26Q&A session
related talks
24mBuilding Reactive GraphQL Apps With Apollo
26mA Journey Through React Apollo
22mReact State Management in a GraphQL Era
28mGraphQLifying React Native App
27mConsume GraphQL API with Apollo Client and React
29mWrite Queries, Not Code
24mState Management in React Apps with Apollo Client
23mOptimistic UI updates with Apollo Client and React