React & Apollo Quickstart

• React: Frontend framework for building user interfaces
• Apollo Client: Fully-featured, production ready caching GraphQL client
• Graphcool: Flexible backend platform combining GraphQL + AWS Lambda

Example (GraphQL Playground)

Quickstart

For more information on how to get started refer to the full react-apollo-instagram tutorial or watch the corresponding video.

1. Clone example repository

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

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 https://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 Simple API endpoint to ./src/index.js as the uri argument in the createNetworkInterface call:

// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })

4. Install depdendencies & 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!