Relay Framework

Learn another GraphQL front-end framework.

Using Relay

If we’re looking for a more opinionated, prepackaged GraphQL framework for our application, Relay is the gold standard. With an API that’s been reimagined since its initial release in 2015, it’s lighter, faster, and easier to use than before. Relay Modern, as it’s called, is worth a serious look when we evaluate a GraphQL framework for our application.

Let’s reimplement our PlateSlate user interface using Relay Modern. As with our Apollo example in the previous section, we use the create-react-app package to build the boilerplate for our new Relay application. This saves us time:

create-react-app plate-slate-relay-ui

Once our application is generated, we can verify that the development server is working correctly by going into the directory and running yarn start:

cd plate-slate-relay-ui
yarn start

Up to this point, there’s nothing Relay-related about the application at all. We’ll pull in some basic Relay dependencies we know are needed:

Press + to interact
yarn add react-relay
yarn add relay-compiler babel-plugin-relay --dev

The react-relay package provides the runtime features that Relay needs to interact with the React UI framework. The relay-compiler and babel-plugin-relay packages include development utilities that prepare GraphQL queries, schemas, and related tooling for Relay’s use. Because we need to make some special modifications to our application’s build process, we use the ejection feature from create-react-app. This feature unpacks the configuration and scripts that ...