https://github.com/nikolasburk/relay-modern-migration-example
:memo: Todo example app built with React & Relay
https://github.com/nikolasburk/relay-modern-migration-example
graphql react relay todomvc
Last synced: about 1 year ago
JSON representation
:memo: Todo example app built with React & Relay
- Host: GitHub
- URL: https://github.com/nikolasburk/relay-modern-migration-example
- Owner: nikolasburk
- Created: 2016-04-20T13:55:44.000Z (about 10 years ago)
- Default Branch: master
- Last Pushed: 2017-07-21T15:15:09.000Z (almost 9 years ago)
- Last Synced: 2025-04-18T09:34:33.023Z (about 1 year ago)
- Topics: graphql, react, relay, todomvc
- Language: JavaScript
- Homepage:
- Size: 118 KB
- Stars: 33
- Watchers: 4
- Forks: 7
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Migrating to Relay Modern
This repository contains 2 branches:
- **classic**: Relay Classic
- **modern**: Relay Modern
You can read the full tutorial describing the migration [here](https://www.graph.cool/docs/tutorials/migrating-to-relay-modern-eijooto4se/).
## Example ([Live demo](https://demo-react-relay-todo-example.netlify.com) & [GraphQL Playground](https://api.graph.cool/relay/v1/cj1nq71xyfabv0199bp3a7hhf))
## Quickstart
### 1. Clone example repository
```sh
git clone https://github.com/graphcool-examples/react-relay-todo-quickstart.git
cd react-relay-todo-quickstart
```
### 2. Create GraphQL API with [`graphcool`](https://www.npmjs.com/package/graphcool)
```sh
# Install Graphcool CLI
npm install -g graphcool
# Create a new project based on the Todo schema
graphcool init --schema http://graphqlbin.com/todo.graphql
```
This creates a GraphQL API for the following schema:
```graphql
type Todo {
text: String!
complete: Boolean!
}
```
### 3. Connect the app with your GraphQL API
Copy the `Relay API` endpoint to `./src/app.js` as the argument for the constructor of `Relay.DefaultNetworkLayer`, replacing `__RELAY_API_ENDPOINT__ `:
```js
// replace `__RELAY_API_ENDPOINT__ ` with the endpoint from the previous step
Relay.injectNetworkLayer(
new Relay.DefaultNetworkLayer('__RELAY_API_ENDPOINT__')
);
```
Further, open `package.json` and paste the endpoint as the value for the `url` key, again replacing `__RELAY_API_ENDPOINT__ `:
```js
"graphql": {
"request": {
"url": "__RELAY_API_ENDPOINT__"
}
},
```
### 4. Install dependencies & run locally
```sh
yarn install
yarn start # open http://localhost:3000 in your browser
```
## Next steps
* [Advanced GraphQL features](https://www.graph.cool/docs/tutorials/advanced-features-eath7duf7d/)
* [Authentication & Permissions](https://www.graph.cool/docs/reference/authorization/overview-iegoo0heez/)
* [Implementing business logic with serverless functions](https://www.graph.cool/docs/reference/functions/overview-boo6uteemo/)
## Help & Community [](https://slack.graph.cool)
Say hello in our [Slack](http://slack.graph.cool/) or visit the [Graphcool Forum](https://www.graph.cool/forum/) if you run into issues or have questions. We love talking to you!
