Build the API you want to see in the world
summary
A production React site (Vogue Germany) moves an intermediary GraphQL layer between an internally built CMS and the app, replacing many client-side calls with a single multi-purpose endpoint and using tools like GraphQL Playground for live schema docs. The layer resolves nested requests and combines sources (CMS plus a shoes API), trims payloads (the app was using less than 50% of returned fields), enforces clearer schemas, and makes the frontend resilient to swapping back-end services while improving performance and debuggability.
AI-written summary · about
chapters (14)
- 0:00Start
- 4:53A lot of our components were tied very specifically to the API response.
- 8:44If we switched data sources, we'd have to completely rewrite our entire application.
- 9:28Technology changes, your app should be resilient!
- 11:30We were fetching data in complicated ways from deep trees in the API every time.
- 13:37One was a refactor based purely on domain driven design.
- 14:23Instant documentation
- 15:29We no longer have to fetch data with multiple requests in our main application.
- 17:35Domain Driven Design Hexagonal Architecture
- 18:24Changing data sources will only affect the GraphQL layer which shields the React app.
- 19:17You have a set of data that needs to serve multiple applications.
- 21:36You're building an application that uses multiple data sources.
- 23:30You want to enforce structure in your code base.
- 23:51You've built your REST API like a pseudo-GraphQL API anyway.
related talks
23mBuild the API You Want to See in the World
24mGraphQL and me
23mA glimpse of GraphQL" Frontend developers’ life is easy now!"
29mAn Angular Front For Your API
58mCrafting compelling real-time web experiences with GraphQL and React
36mGraphQL Will Do To REST What JSON Did To XML
18mCrafting compelling real-time web experiences with GraphQL
27mTransforming GraphQL: Infrastructure as Code for Front End Developers