@defer and @stream + Relay Example App

This is an example showing a minimal app using Relay with the @defer and @stream directives.

Getting Started

pnpm install
pnpm run start

Packages Used

• Client
  • React - UI Framework
  • Relay - GraphQL Client
• Server
  • [graphql-js] - GraphQL Schema
• Dev Setup
  • TypeScript - Typed JavaScript
  • Parcel - Bundler for client code
  • ts-node - Run TypeScript files directly
  • Prettier - Auto-format code
  • concurrently - Run multiple watch commands concurrently

Translation layer

See fetchGraphQL.ts for an example translation layer that converts the latest incremental delivery GraphQL response format to the Facebook internal format that Relay understands.

This requires setting deferDeduplicatedFields: true when creating the Relay Environment to ignore errors thrown from missing fields in deferred responses (facebook/relay#5083). If a field is included in both a deferred and non-deferred fragment, Relay expects the server to return this field twice. The latest spec algorithm ensures the same field is not executed multiple times.

(Please note that deferDeduplicatedFields is absent in Relay's TypeScript types, but it still works. See: facebook/relay#5340)