React, Relay and GraphQL — a perfectly normal component approach
summary
A practical component workflow built with React + Relay + GraphQL is presented, demonstrated by a Heroku-hosted Northwind-like app (eight types, several pages) implemented with ~3000 lines frontend and ~750 lines backend. The demo shows live GraphQL queries using fragments, nested relations, connections for pagination, and server introspection, while Relay handles caching, a flattened store, and optimistic updates to keep the UI responsive; many subqueries are combined into a single HTTP request to reduce network calls.
AI-written summary · about
chapters (25)
- 0:00Introduction
- 1:18About the talk
- 2:00Web dev history
- 4:57What is React
- 7:33React learning resources
- 8:17What is GraphQL
- 10:03Why GraphQL rocks
- 13:35GraphQL demo
- 14:44GraphQL schema structure
- 16:12GraphQL query examples
- 17:59GraphQL fragments
- 20:32Nested GraphQL queries
- 23:11GraphQL advantages
- 28:07What is Relay
- 29:12Relay components and containers
- 31:24Relay usage example
- 33:10Relay Router and app flow
- 34:35Relay app demo
- 37:27Relay caching
- 38:54Relay Store explained
- 41:03Optimistic updates and error handling
- 42:48Relay docs and community
- 44:16Relay and Apollo future
- 45:41Development path choice
- 46:43Summary and code
related talks
01h 00mPowering the Front-end with React, GraphQL and Relay
35mUsing GraphQL and Relay for hybrid RoR apps
28mRelay: An Application Framework For React
30mGraphQL in the Era of React Server Components
43mGraphQL in the Era of Server Components
21mReact Server Components Vs. GraphQL
05mYou Don't Need a Fancy Framework to Use GraphQL with React
33mUsing GraphQL and Relay for hybrid Ruby on Rails applications