Making It All Fit Together with React and GraphQL

on YouTube ↗13m

" summary

Stripe uses React + GraphQL + Apollo and shows concrete pieces: a global schema file checked into the mono repo, automatic Flow type generation, a wrapper that yields ready-to-use React components from queries, and schema-based data mocking with overrides for mocks to exercise edge cases and error/loading states. CI runs a backwards-compat checker that forces deprecate-then-delete changes, and monitoring reports per-field usage so removal is safe. These tools speed testing, reduce regressions, and make rollouts safer.

AI-written summary · about

" chapters (15)

1. 0:00Intro
2. 1:32STRIPE'S WEB STACK
3. 1:44GraphQL: Define a schema instead of a list of endpoints
4. 2:54PRODUCT DEVELOPMENT
5. 3:43Why does GraphQL have such a big impact?
6. 4:30Why mocking?
7. 6:16EXAMPLE: DEFAULT MOCKS
8. 6:44EXAMPLE: OVERRIDING FIELDS
9. 7:06MOCK FOR LOADING/ERROR STATES
10. 7:36Collaborating on an API
11. 8:10Schema guard rails
12. 8:47GENERATING FLOW TYPES
13. 10:19How do we make breaking changes?
14. 11:19Great community tools and docs
15. 11:59AUTOMATICALLY GENERATE STATIC TYPES

" related talks

• 24mBuilding Reactive GraphQL Apps With ApolloMartijn Walraven · React Amsterdam 2016
• 01h 02mDesigning a Flexible UI Architecture with React and GraphQLKamran Ayub · NDC Minnesota 2019
• 05mYou Don't Need a Fancy Framework to Use GraphQL with ReactSamer Buna · React Conf 2017
• 26mFull Stack Type Safety with React, GraphQL, and TypeScriptRobert Zhu · Nordic.js 2019
• 34mCreate Flexible React Applications Using GraphQL APIsMaurice de Beijer · Codemotion Rome 2018
• 30mReact & GraphQL - Bringing Simplicity and Correctness to Client Side DevelopmentChris Toomey · React Boston 2018
• 35mFull-stack Type Safety with React, GraphQL, and TypeScriptRobert Zhu · React Boston 2019
• 22mReact State Management in a GraphQL EraKitze Ristovski · React Day Berlin 2017