Relay is a new framework from Facebook that provides data-fetching functionality for React applications. Each component specifies its own data dependencies declaratively using a query language called GraphQL. The data is made available to the component via properties. Developers compose these React components naturally, and Relay takes care of composing the data queries into efficient batches, providing each component with exactly the data that it requested (and no more), updating those components when the data changes, and maintaining a client-side store (cache) of all data. GraphQL is a data querying language designed to describe the complex, nested data dependencies of modern applications. On the server, the GraphQL system to maps queries to underlying data-fetching code. This configuration layer allows GraphQL to work with arbitrary underlying storage mechanisms. Relay uses GraphQL as its query language, but it is not tied to a specific implementation of GraphQL.
Relay is available on GitHub.
With React, Facebook revolutionized how UI is built for web and mobile apps. Now they are revolutionizing data fetching for those apps. We are looking forward to the open source release of Relay and GraphQL by the amazing team of Facebook engineers and everything the community comes up with after that happens. The future looks bright.
Using GraphQL you define the query of the component and Relay reads the whole tree gathering the requirements and supplying the needed data for each component. The data is not passed from parents any more but by a centralized engine. All data requirements are fetched by this centralized engine and supplied to whatever component is asking it down the tree.
We’re waiting for Facebook to release some of this stuff (GraphQL, Relay, React Native) and they’re opening up access slowly. Until then, if you haven’t tried it out yet, check out React.js. You’ll pick it up in an hour, have something fun working by the second hour, and have an opinion by the third. I’ll bet your opinion is that you never want to go back.
Thank you, GraphQL and Relay people, for challenging the status quo! Though it makes me slightly uncomfortable, I greatly appreciate it.
It lets your front end developers move faster. A GraphQL/Relay set up separates your back and front end team and allows your front end developers to move fast and provide awesome UX. When a view needs an extra attribute you simply add it to your components fragment and your done. No need to make changes to traditional ad-hoc backend server endpoints.