nikolasburk / relay-modern-migration-example

:memo: Todo example app built with React & Relay

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.

Example (Live demo & GraphQL Playground)

Quickstart

1. Clone example repository

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

2. Create GraphQL API with graphcool

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

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 dependencies & run locally

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

Next steps

• Advanced GraphQL features
• Authentication & Permissions
• Implementing business logic with serverless functions

Help & Community

Say hello in our Slack or visit the Graphcool Forum if you run into issues or have questions. We love talking to you!