See what Relay does for your data, one mechanism at a time.
Each page runs a real Relay 21 environment against a real GraphQL server in this Next.js app. The diagrams are drawn from Relay's own log events and store, so what you see is what the runtime actually did.
Nested data in one request. Watch a REST waterfall and N+1 fetches race a single GraphQL query.
Components declare exactly the fields they render. X-ray the UI to see fragments compose into one query.
Responses are trees; Relay's store is a graph. See duplicates collapse into one record per ID.
Like a post once and every view of it updates — optimistically, with rollback, re-rendering only subscribers.
Connections, edges and cursors as a live diagram. Relay generates the pagination query for you.
Side by side: the fragment you write and the artifact, types and persisted id the compiler emits.
The schema is a typed graph of your domain. Explore it the way tools do, through introspection.
Hand-rolled REST, React Query, BFFs and tRPC next to Relay. Watch frontend code and endpoints pile up as requirements grow.
Compiler, masking, generated pagination, declarative store updates: what Relay does that Apollo doesn't, and where Apollo is the easier choice.
@defer and @stream running live, server-component preloading, @required and @catch, plus the lesser-known features worth knowing.