Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

DOCS: Add Relay example #5233

Merged
merged 1 commit into from
Oct 2, 2018
Merged
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
35 changes: 35 additions & 0 deletions packages/react-scripts/template/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -836,6 +837,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.
Expand Down