• React: Frontend framework for building user interfaces
• Relay: Powerful GraphQL client developed by Facebook
• Graphcool: Backend development framework based on GraphQL + Serverless

git clone https://github.com/graphcool-examples/react-graphql.git
cd react-graphql/quickstart-with-relay-modern

# Install Graphcool Framework CLI
npm install -g graphcool

# Create a new service inside a directory called `server`
graphcool init server

This created the following file structure in the current directory:

.
└── server
    ├── graphcool.yml
    ├── types.graphql
    └── src
        ├── hello.graphql
        └── hello.js

Next, you need to define your data model inside the newly created types.graphql-file.

Replace the current contents in types.graphql with the following type definition (you can delete the predefined User type):

type Post @model {
  # Required system field
  id: ID! @isUnique # read-only (managed by Graphcool)

  # Optional system fields (remove if not needed)
  createdAt: DateTime! # read-only (managed by Graphcool)
  updatedAt: DateTime! # read-only (managed by Graphcool)

  description: String!
  imageUrl: String!
}

You're now ready to put your Graphcool service into production! Navigate into the server directory and deploy the service:

cd server
graphcool deploy

When prompted which cluster you want to deploy to, choose any of the Shared Clusters options (shared-eu-west-1, shared-ap-northeast-1 or shared-us-west-2).

Save the HTTP endpoint for the Relay API from the output, you'll need it in the next step.

Note: You can now test your GraphQL API inside a GraphQL playground. Simply type the graphcool playground command and start sending queries and mutations. Note that the Playground by default is running against the Simple API but can easily be adjusted to use the Relay API.

Paste the Relay API endpoint to ./src/createRelayEnvironment.js as the argument for the call to fetch replacing __RELAY_API_ENDPOINT__ :

// replace `__RELAY_API_ENDPOINT__ ` with the endpoint from the previous step
return fetch('__RELAY_API_ENDPOINT__', {
 ...
})  

Note: If you ever lose your endpoint, you can get access to it again with the graphcool info command.6

cd ..
yarn install
yarn relay # invoke relay compiler
yarn start # open http:https://localhost:3000 in your browser

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

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