react-relay-todo-example

React: Frontend framework for building user interfaces
Relay: Powerful GraphQL client developed by Facebook
Graphcool: Flexible backend platform combining GraphQL + AWS Lambda

Example (Live demo & GraphQL Playground)

Quickstart

For more information on how to get started refer to the full react-relay-todo tutorial.

1. Clone example repository

git clone https://github.com/graphcool-examples/react-relay-todo-example.git
cd react-relay-todo-example

2. Create GraphQL API with `graphcool`

# Install Graphcool CLI
npm install -g graphcool

# Create a new project based on the Todo schema
graphcool init --url graph.cool/schema/todo

This creates a GraphQL API for the following schema:

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__ :

// 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__ :

"graphql": {
  "request": {
    "url": "__RELAY_API_ENDPOINT__"
  }
},

4. Install depdendencies & run locally

yarn install
yarn start # open http://localhost:3000 in your browser

Next steps

Help & Community

Join our Slack community if you run into issues or have questions. We love talking to you!

sdee/recipe-relay