Relay
Relay is a free GraphQL client for React that combines the data needs of components into optimized queries that can be prepared in advance.
What Relay is
Relay is a free GraphQL client for React that combines the data needs of components into optimized queries that can be prepared in advance. Components declare what they need, and Relay aggregates requirements, including removing duplicate fields from requests. Its normalized data store keeps components observing the same data in sync. Interface features include loading states, pagination, refetching, optimistic updates and reverting those updates when mutations fail. Queries can defer some data and progressively render as the rest streams in. Relay generates TypeScript types for GraphQL snippets and provides editor features such as schema autocompletion and go-to-definition. Developers can configure its network layer for HTTP, WebSockets, authentication, caching, telemetry and form-data uploads. Relay requires GraphQL, a Babel plugin and the Relay Compiler; production guidance recommends running the compiler in CI and keeping generated artifacts in source control. Documentation covers React Native and setup with React, Vite, TypeScript and Babel. Relay recommends persisted queries to restrict clients to queries fixed at build time.
Good
- Combines and optimizes component data requirements.
- Keeps shared data synchronized in a normalized store.
- Supports optimistic updates and rollbacks.
- Generates TypeScript types for GraphQL snippets.
- Works with React Native.
Watch out
- Requires GraphQL.
- Requires a Babel plugin and Relay Compiler.
- Production guidance calls for CI compilation and checked-in artifacts.
Who it suits
Relay suits React developers building GraphQL applications, particularly those using Flow or TypeScript and needing generated types or coordinated data requirements across components. It requires a GraphQL setup, Babel plugin and Relay Compiler.
Verdict
Relay offers a broad set of GraphQL data and UI patterns for React, including type generation and streamed rendering. Account for its compiler and Babel requirements when evaluating the setup.
The facts
Each one read from Relay's own pages, with the date it was checked.
What it does
- Built-in UI patterns
- Relay supports loading states, pagination, refetching, optimistic updates, and rollbacks.checked 2 Oct 2026
- Data consistency
- Relay maintains a normalized data store so components observing the same data stay in sync.checked 3 Oct 2026
- Declarative data
- Components declare the data they need, and Relay generates queries to fetch it.checked 3 Oct 2026
- Editor support
- Relay editor support provides GraphQL schema autocomplete and go-to-definition.checked 3 Oct 2026
- Generated types
- Relay generates TypeScript types for GraphQL snippets, and the homepage also describes generated Flow or TypeScript types.checked 3 Oct 2026
- Integrations
- The quick start documents setup with React, Vite, TypeScript, Babel, and the Relay Compiler.checked 3 Oct 2026
- More features
- Relay includes loading states, pagination, refetching, optimistic updates, rollbacks, and streamed or deferred data.checked 3 Oct 2026
- Mutations
- Relay supports optimistic updates, error handling, and automatically reverting optimistic changes when mutations fail.checked 3 Oct 2026
- Network customization
- The network layer can be customized for behaviors such as network-level caching, telemetry, or form-data uploads for mutations.checked 2 Oct 2026
- Network transports
- Developers can configure HTTP, WebSockets, and application-appropriate authentication through Relay's network layer.checked 2 Oct 2026
- Optimizations
- Relay aggregates and optimizes component data requirements, including deduplicating identical fields for efficient GraphQL requests.checked 3 Oct 2026
- Product
- Relay is a GraphQL client for React that coordinates component data needs into efficient, pre-loadable queries.checked 3 Oct 2026
- Production setup
- The production guide recommends running the Relay Compiler in CI and keeping generated artifacts in source control.checked 2 Oct 2026
- React Native
- The official documentation says Relay also works with React Native.checked 3 Oct 2026
- Requirements
- Relay requires GraphQL; its homepage says users need a Babel plugin and must run the Relay Compiler.checked 3 Oct 2026
- Scale
- The homepage says Relay is used in Facebook infrastructure across tens of thousands of components and has full-time staff working to improve it.checked 3 Oct 2026
- Security guidance
- Relay recommends persisted queries, also called trusted documents, to restrict clients to queries locked in at build time.checked 2 Oct 2026
- Server conventions
- Relay provides first-class support for GraphQL Connections when the server supports them and relies on globally unique object IDs for caching and refetching.checked 3 Oct 2026
- Shared state
- Relay maintains a normalized data store that keeps components observing the same data in sync.checked 2 Oct 2026
- Streaming
- Relay can defer parts of a query and progressively re-render the UI as data streams in.checked 2 Oct 2026
- Supported usage
- The homepage says Relay works out of the box with Create React App and Next.js, and identifies Flow or TypeScript users as a likely fit.checked 3 Oct 2026
- Type safety
- Relay generates TypeScript types for GraphQL snippets to catch errors statically.checked 2 Oct 2026
The company
- Company and project
- The site identifies Meta Platforms, Inc. in its copyright notice and says Relay was built in tandem with GraphQL and is used at Facebook scale.checked 2 Oct 2026
Alternatives to Relay
- 1
Altair GraphQL Client
Free planWebExtensionLinuxmacOS7.4From $7.99 a month - 2
Apollo Client
Free planAndroidiOSWebAPI7.3From $5 a month - 3
Hasura
Free planWebAPILinuxSelf-hosted6.9Free plan - 4
GraphQL Hive
Free planWebAPISelf-hosted6.7From $20 a month - 5
PostGraphile
Free planWebAPISelf-hosted6.7From $25 a month - 6
WunderGraph Cosmo
Free planWebAPISelf-hosted6.7From $499 a month