In this video, Emmanuel Henri introduces Relay Modern with a brief explanation of its value in the React ecosystem, and then goes on to install what is required for Relay to work with the application.
- [Instructor] If you've used Relay in the past and never tried Relay modern, it's a complete rewrite of the library, to make it even easier to integrate React and GraphQL. If you haven't, even better, you'll learn about Relay at its best. In a nutshell, Relay allows React components to integrate seamlessly with GraphQL, improvise an approach similar to decomposing your app into components, the ability to fetch only the data you need at the component level. You could, if you want, replace Redux by Relay.
Let's go ahead and set up Relay to work with GraphQL, the first thing we'll do is set up our dependencies. Let's go into our console and stop the server and you'll need to add a few dependencies, so the first one we'll add is a dev dependency, so let's go ahead and do, yarn add or you can do npm install, relay compiler and you want to make sure that this is a dev dependency.
Perfect and let's open our package.json file so we keep track of what's being added. Okay, so let's clear that up again and this time, let's add yarn add or npm install, a whole bunch of dependencies that will be in the core dependencies. So the first one that I need is, babel-core, then, babel-loader, then babel-plugin-relay, then we need the plugin, babel-plugin-transform-runtime, then, babel-preset-react, then, babel-runtime again, then, classnames, I need also, graphql-relay, react-relay, so webpack and webpack dev server needs to be at specific versions so, the way you do that is with the sign @ and then the specific versions that you want.
So for example, for this one, we need the 1.13.2 for webpack and for webpack dev server, we need @1.16.1 and then finally, we need whatwg-fetch. Alright, let me just quickly check to make sure there's no typo, babel core, babel loader, plugin relay, plugin transform runtime, preset react, runtime, class names, graphql relay, react relay, webpack at this version, webpack dev server at this version and whatwg fetch.
Okay, we're good. Alright, so while it's doing this, we need to add a little script, so just at the top here, just after start, we'll enter a second script and this one will allow us to create our components with relay, once we start our servers. So this script goes like so, so, relay-compiler and then what we need to do is, call the source and it'll be in the source folder and we need to grab the schema file at this particular folder that we'll create eventually, graphql.
So this is all you need and I will explain what that does when we get to it, but I wanted to set it up right now. So the next thing we need to do is insert a few things in our .babel rc file. So the first thing I want you to do in the preset is to add react, so we'll add react and I like to put react first, like so and then, in the plugins, I'm going to add relay and transform-runtime, which is one of the dependencies that we've just installed.
Alright, so we've installed all the dependencies we need. If you run, yarn start at this point, the server will throw an error so, don't worry about it, we'll fix it as we complete our code over the coming videos.
- Setting up GraphQL
- Running queries
- Updating schema and solvers
- Adding data
- Adding Relay entry components
- Coding GraphQL fragments