Powering the Front-end with React, GraphQL and Relay
summary
Demo shows a Next.js React front end wired to GraphQL and Relay Compiler producing static artifacts; a single composed operation (the compiler emits a 100-line composed query) returns incremental patches for a dashboard of 10 currencies via subscriptions over WebSocket or SSE. Bottom-up fragments drive data requirements, the runtime normalizes into a store, pagination uses relay pagination hooks, and mutations use an optimistic updater. Workshop code runs live with simulated 3s delays to demonstrate ordering and UI stability.
AI-written summary · about
chapters (9)
- 0:00Introduction
- 1:53What is GraphQL
- 7:12Choosing React, GraphQL, Relay
- 10:01Demo: React-GraphQL-Relay app
- 24:14Building Relay components
- 35:12Relay query optimization
- 42:41Pagination and subscriptions
- 52:07Mutations and optimistic updates
- 57:06Scaling teams
related talks
47mReact, Relay and GraphQL — a perfectly normal component approach
35mUsing GraphQL and Relay for hybrid RoR apps
28mRelay: An Application Framework For React
29mJSConf 2015 Laney Kuenzel
32mReintroducing Relay
12mRelay Concepts
14mWhy Relay is a Must for your GraphQL APIs
31mTeaching GraphQL to write code for you, your users & customers