From a9c09d48d90cfea3637920a8b41a69eb4920454d Mon Sep 17 00:00:00 2001 From: Zacharias Knudsen Date: Tue, 2 Oct 2018 14:30:09 +0200 Subject: [PATCH] Add Relay example (#5233) --- packages/react-scripts/template/README.md | 35 +++++++++++++++++++++++ 1 file changed, 35 insertions(+) diff --git a/packages/react-scripts/template/README.md b/packages/react-scripts/template/README.md index 13dabe01bf2..07cf02cb8b8 100644 --- a/packages/react-scripts/template/README.md +++ b/packages/react-scripts/template/README.md @@ -37,6 +37,7 @@ You can find the most recent version of this guide [here](https://github.com/fac - [Adding Bootstrap](#adding-bootstrap) - [Using a Custom Theme](#using-a-custom-theme) - [Adding Flow](#adding-flow) +- [Adding Relay](#adding-relay) - [Adding a Router](#adding-a-router) - [Adding Custom Environment Variables](#adding-custom-environment-variables) - [Referencing Environment Variables in the HTML](#referencing-environment-variables-in-the-html) @@ -849,6 +850,40 @@ In the future we plan to integrate it into Create React App even more closely. To learn more about Flow, check out [its documentation](https://flow.org/). +## Adding Relay + +Relay is a framework for building data-driven React applications powered by GraphQL. The current release candidate of Relay works with Create React App projects out of the box using Babel Macros. Simply set up your project as laid out in the [Relay documentation](https://facebook.github.io/relay/), then make sure you have a version of the babel plugin providing the macro. + +To add it, run: + +```sh +npm install --save --dev babel-plugin-relay@dev +``` + +Alternatively you may use `yarn`: + +```sh +yarn upgrade babel-plugin-relay@dev +``` + +Then, wherever you use the `graphql` template tag, import the macro: + +```js +import graphql from "babel-plugin-relay/macro"; +// instead of: +// import { graphql } from "babel-plugin-relay" + +graphql` + query UserQuery { + viewer { + id + } + } +`; +``` + +To learn more about Relay, check out [its documentation](https://facebook.github.io/relay/). + ## Adding a Router Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one.