Components as Data: A Cross Platform GraphQL Component API
summary
A concrete claim: a GraphQL-backed API serves a JSON UI tree so Android iOS Roku Samsung and web all render the same component graph used on NBC.com. Implementation uses a GraphQL schema that models components as types a runtime Components as Data renderer with a conditional resolver to handle platform variance and a lazy shelf pattern for pagination. Result is centralized business logic and A/B testing fewer duplicated queries and measurable query optimization and caching gains against previous client-side denormalization.
AI-written summary · about
chapters (28)
- 0:00Intro
- 0:38Components
- 1:11Component Definition
- 1:31Props
- 1:55Component Example
- 2:30Component Composable
- 2:49I love components
- 6:10Decoupling Architecture
- 7:35restful
- 8:35Stripe
- 9:46HeyDos
- 10:06Pagination
- 11:47Monolith
- 14:11Offline first application
- 14:42Distributed local first
- 16:50Example
- 17:26React
- 20:44Basic Components
- 21:03Why GraphQL
- 21:37GraphQL Schema
- 23:55Page Type
- 24:24Apollo Playground Example
- 26:24Design Schema
- 26:52GraphQL Component Library
- 27:46React Frontend Implementation
- 29:38Handling Variants
- 31:51Good Parts
- 32:55Final Thoughts
related talks
43mGraphQL in the Era of Server Components
30mGraphQL in the Era of React Server Components
45mComponent based API for your Angular Components with GraphQL
24mThe future of Angular client-server communication with GraphQL
47mReact, Relay and GraphQL — a perfectly normal component approach
47mRock-Solid Components with TypeScript and GraphQL
44mBuilding Data Driven AR Experiences Powered by GraphQL by Vladimir Novick
30mReact & GraphQL - Bringing Simplicity and Correctness to Client Side Development