Optimistic UI updates with Apollo Client and React
summary
Shows a React + Apollo Client front end with Apollo Server and Node implementing optimistic UI for full CRUD and drag‑and‑drop reordering. Implements cache update functions and the optimisticResponse option, uses temporary ID and __typename fields for creates, adds a custom merge function to resolve array conflicts, and disables update/delete buttons until server responses arrive. Also covers nested types by adding an author object and a displayOrder integer for DnD. Demo runs instantly on slow 3G and then reconciles with server state.
AI-written summary · about
chapters (9)
- 0:00Problem
- 2:24Main Question
- 4:12What are Optimistic UI Updates
- 5:50Optimistic Response
- 6:58Create Mutation
- 11:12Delete Mutation
- 12:56Custom Merge Function
- 15:57Fix Error
- 17:50Complex Use Cases
related talks
24mBuilding Reactive GraphQL Apps With Apollo
01h 00mArchitecting Data-Driven Apps for UX Success
24mModern Apollo Client React
26mA Journey Through React Apollo
25mReact state management in a GraphQL era
01h 02mDesigning a Flexible UI Architecture with React and GraphQL
58mCrafting compelling real-time web experiences with GraphQL and React
24mState Management in React Apps with Apollo Client