react-relay-instagram-quickstart

• 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-instagram tutorial.

1. Clone example repository

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

2. Create GraphQL API with graphcool

# Install Graphcool CLI
npm install -g graphcool

# Create a new project based on the Instagram schema
graphcool init --schema http://graphqlbin.com/instagram.graphql

This creates a GraphQL API for the following schema:

type Post {
  description: String!
  imageUrl: String!
}

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 copy the Relay API endpoint into it replacing __RELAY_API_ENDPOINT__ in the following line:

"start": "GRAPHQL_ENDPOINT=${GRAPHQL_ENDPOINT:=__RELAY_API_ENDPOINT__} webpack-dev-server -d --hot --inline --history-api-fallback --no-info --port 3000",

The line will look similar to this afterwards:

"start": "GRAPHQL_ENDPOINT=${GRAPHQL_ENDPOINT:=https://api.graph.cool/relay/v1/abcdefghijklmnop} webpack-dev-server -d --hot --inline --history-api-fallback --no-info --port 3000",

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

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