Consume GraphQL API with Apollo Client and React
summary
Claims that GraphQL avoids over‑ and under‑fetching with a concrete timing: SWAPI GraphQL returns a character list in 602 ms vs 4 s for the REST calls shown. Builds a Next app against the Northwind GraphQL endpoint using ApolloProvider with InMemoryCache and the npm packages apollo-client and graphql. Implements list and single‑item queries with variables and runs create/update/delete via useQuery and useMutation, with mutations updating Apollo cache and UI in the demo.
AI-written summary · about
chapters (12)
- 0:00Introduction
- 0:52Talk agenda and GraphQL basics
- 3:40GraphQL myths and Apollo Client
- 5:27Setting up Apollo Client
- 8:16First GraphQL query
- 12:30Fetching data with useQuery
- 14:17Querying with variables
- 18:53Displaying product details
- 19:13Mutating data
- 22:24Adding products
- 23:50Updating and deleting products
- 26:41Q&A
related talks
29mWrite Queries, Not Code
58mCrafting compelling real-time web experiences with GraphQL and React
24mBuilding Reactive GraphQL Apps With Apollo
24mAll You Need Is Apollo Client
28mGraphQLifying React Native App
24mModern Apollo Client React
37mAll you need is l̶o̶v̶e Apollo Client
22m5 Antipatterns that Made Our React/GraphQL App Slow (And How We Fixed Them)