How to Use Suspense and GraphQL with Apollo to Build Great User Experiences
summary
Demonstrates migrating an app to Apollo Client 3.8 by replacing useQuery with useSuspenseQuery, removing loading booleans so components treat data like synchronous values, and reorganizing Suspense boundaries to trade off single versus nested paints. Shows a Spotify-clone demo that uses the GraphQL defer directive to stream slow fields, fixes pagination hiding existing items with React 18’s startTransition, and mentions useBackgroundQuery/useReadQuery to avoid waterfalls plus type improvements in TypeScript.
AI-written summary · about
chapters (27)
- 0:00Introduction to talk
- 0:23What we’ll cover today
- 1:25Context of Suspense in React
- 2:29Traditional Apollo client loading states
- 3:34Suspense basics and React example
- 4:16How Suspense works under the hood
- 6:26Suspense beyond loading states
- 6:46Introducing useSuspenseQuery
- 7:28Demo app overview
- 8:10Current loading UX with useQuery
- 9:14Converting to useSuspenseQuery
- 10:42First suspense boundary
- 11:45Converting remaining components
- 13:31Grouping updates with suspense
- 14:34Single suspense boundary demo
- 15:37Navigation and trade-offs
- 16:40Nested suspense boundaries
- 17:20Handling fast component loads
- 18:23Removing synthetic delays
- 19:04Improving with defer directive
- 21:55Pagination with useSuspenseQuery
- 22:56Fixing pagination UX with transitions
- 24:20Recap of key improvements
- 25:25Other suspense-enabled hooks
- 26:06Future suspense features
- 26:49Demo code and resources
- 27:11Q&A and feedback
related talks
26mA Journey Through React Apollo
29mWrite Queries, Not Code
09mRoad to a Better UX with Suspense and Concurrent UI
22mRoad to a better UX with Suspense and Concurrent UI
27mConsume GraphQL API with Apollo Client and React
31mMoving To Suspense
42mSolidJS: Why all the Suspense?
24mModern Apollo Client React