Relay Framework
Learn another GraphQL front-end framework.
We'll cover the following...
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:
yarn add react-relayyarn 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 ...