OSS TanbouOn this page
Overview
Relay colocates GraphQL data requirements with React views, uses a compiler to generate query artifacts, and relies on a runtime for network requests, normalized storage, caching, mutations, subscriptions, and optimistic updates. It standardizes how UI components declare and consume GraphQL data.
Features and best fit
Based on official documentation; not hands-on tested · Content checked:
Key features
Colocate GraphQL fragments and queries with the views that use them
Components declare required fields in GraphQL, while the Relay compiler validates and transforms those definitions into runtime artifacts.
Sources: [1]
Manage normalized storage, fetch policies, and mutations in the runtime
relay-runtime provides networking, record storage, query execution, mutations, subscriptions, and optimistic updates and merges server responses into a normalized cache.
Connect generated artifacts to React with hooks
react-relay exposes useLazyLoadQuery, useFragment, useMutation, RelayEnvironmentProvider, and other hooks and components for binding a Relay environment to React.
Sources: [3]
Best fit
Fits large React applications that need consistent GraphQL dependencies and cache behavior
It is useful when teams want view-level data colocation together with standardized request aggregation, normalized caching, and mutation consistency.
Sources: [1]
Before adoption
react-relay 21.0.1 supports React 16.9 through 19
Package metadata declares React ^16.9.0 || ^17 || ^18 || ^19 as its peer range and depends on relay-runtime 21.0.1.
Sources: [2]
Version 21.0.1 fixes missing TypeScript definitions in the published bundle
Version 21.0.0 omitted the new TypeScript definition files from its npm bundle; 21.0.1 fixes the packaging problem.
Sources: [5]
Official sources
- [1]Relay v21.0.1 README(2026-10-05)
- [2]react-relay 21.0.1 package metadata(2026-10-05)
- [3]react-relay 21.0.1 public exports(2026-10-05)
- [4]relay-runtime 21.0.1 public exports(2026-10-05)
- [5]Relay v21.0.1 release(2026-10-05)
- [6]Relay MIT license(2026-10-05)
Supplemental curator note
Relay depends on a GraphQL schema and compiler-generated artifacts, so adoption includes build-pipeline decisions beyond choosing a runtime fetch library.
Try it in 3 steps
- 1
Install pinned Relay 21.0.1
Create an isolated npm project with the React binding and runtime pinned to the same version.
demo=$(mktemp -d "${TMPDIR:-/tmp}/relay.XXXXXX") && cd "$demo" && npm init -y >/dev/null && npm install --save-exact react-relay@21.0.1 relay-runtime@21.0.1 react@19.2.0 - 2
Verify both package versions
Require react-relay and relay-runtime to match the reviewed 21.0.1 release.
test "$(node -e "console.log(require('react-relay/package.json').version+'/'+require('relay-runtime/package.json').version)")" = '21.0.1/21.0.1' - 3
Check representative React and runtime exports
Verify the main React hooks and normalized runtime APIs without connecting to a GraphQL server.
test "$(node -e "const R=require('react-relay'); const RT=require('relay-runtime'); console.log(['useLazyLoadQuery','useFragment','useMutation','RelayEnvironmentProvider'].every(k=>k in R)&&['Environment','Network','RecordSource','Store'].every(k=>k in RT))")" = 'true'
Growth
Growth trends · Last 30 days
18,965 Stars
Trend data is still being collected.
Development activity
Last 90 days · weekly
- Commits (last 30 days)
- 116
- Open PRs
- 227
Development activity is still being collected.
Built with
Categories and tags
Categories
GitHub data
GitHub dataView detailed GitHub data
Related information
Write a related articleShare a guide or use case for this OSS in Markdown. Articles are published after administrator approval.
Explore next
- Axios109,284 Stars
2 shared tag(s) · 1 shared category(s)
Share interceptors, adapters, timeouts, and cancellation across browser and Node.js HTTP requests
JavaScript - Svelte88,287 Stars
2 shared tag(s) · 1 shared category(s)
compile components into efficient JavaScript and express reactive UI through runes
JavaScript - Express69,520 Stars
2 shared tag(s) · 1 shared category(s)
Build Node.js APIs and web backends by composing routing and middleware into a thin HTTP layer
JavaScript - React Router56,590 Stars
2 shared tag(s) · 1 shared category(s)
multi-strategy routing for URLs, nested routes, navigation, and data flow in React applications
TypeScript - styled-components41,099 Stars
2 shared tag(s) · 1 shared category(s)
CSS-in-JS for React using tagged templates with scoped styles, theming, SSR, and React Native support
TypeScript - tRPC40,690 Stars
2 shared tag(s) · 1 shared category(s)
Carry server types to clients and catch API mismatches during development
TypeScript
Report incorrect information
Tell us if any listing information is incorrect or outdated.