GraphQL, React & Apollo Demo

GraphQl Slides: Slides from the lecture
React: Frontend framework for building user interfaces
Apollo Client: Fully-featured, production ready caching GraphQL client
Graphcool: Backend development framework based on GraphQL + Serverless
GraphQl Slides: Slides that accompany this demo

Example

Quickstart

1. Clone example repository

git clone https://github.com/JoeKarlsson/graphql-apollo-demo.git
cd graphql-apollo-demo

2. Create Graphcool service with the Graphcool CLI

# 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

3. Define data model

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!
}

4. Deploy the GraphQL server

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 Simple 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.

5. Connect the frontend app with your GraphQL API

Paste the Simple API endpoint from the previous step to ./src/index.js as the uri argument in the HttpLink constructor call:

// replace `__SIMPLE_API_ENDPOINT__` with the endpoint from the previous step
const httpLink = new HttpLink({ uri: '__SIMPLE_API_ENDPOINT__' })

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

6. Install dependencies & run locally

cd ..
npm install
npm start # open http://localhost:3000 in your browser

Next steps

Maintainers

Joe Karlsson

JoeKarlsson/graphql-apollo-demo