Skip to content

Commit ab975bb

Browse files
zachasmeTimer
authored andcommitted
Add Relay example (facebook#5233)
1 parent 8208b6c commit ab975bb

File tree

1 file changed

+35
-0
lines changed

1 file changed

+35
-0
lines changed

template/README.md

+35
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ You can find the most recent version of this guide [here](https://github.com/fac
3737
- [Adding Bootstrap](#adding-bootstrap)
3838
- [Using a Custom Theme](#using-a-custom-theme)
3939
- [Adding Flow](#adding-flow)
40+
- [Adding Relay](#adding-relay)
4041
- [Adding a Router](#adding-a-router)
4142
- [Adding Custom Environment Variables](#adding-custom-environment-variables)
4243
- [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.
849850

850851
To learn more about Flow, check out [its documentation](https://flow.org/).
851852

853+
## Adding Relay
854+
855+
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.
856+
857+
To add it, run:
858+
859+
```sh
860+
npm install --save --dev babel-plugin-relay@dev
861+
```
862+
863+
Alternatively you may use `yarn`:
864+
865+
```sh
866+
yarn upgrade babel-plugin-relay@dev
867+
```
868+
869+
Then, wherever you use the `graphql` template tag, import the macro:
870+
871+
```js
872+
import graphql from "babel-plugin-relay/macro";
873+
// instead of:
874+
// import { graphql } from "babel-plugin-relay"
875+
876+
graphql`
877+
query UserQuery {
878+
viewer {
879+
id
880+
}
881+
}
882+
`;
883+
```
884+
885+
To learn more about Relay, check out [its documentation](https://facebook.github.io/relay/).
886+
852887
## Adding a Router
853888

854889
Create React App doesn't prescribe a specific routing solution, but [React Router](https://reacttraining.com/react-router/web/) is the most popular one.

0 commit comments

Comments
 (0)