Subscriptions Example (with React & Apollo)

A realtime chat application that displays the locations of all the chat participants on a map.

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

Getting Started

Subscriptions allow you to bring realtime functionality into your app. You can learn more about subscriptions in our docs.

1. Clone example repository

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

2. Create Graphcool service with the Graphcool CLI

# Install Graphcool Framework CLI
npm install -g graphcool@next

# 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 Traveller @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)

  name: String!
  location: Location! @relation(name: "TravellerLocation")
  messages: [Message!]! @relation(name: "MessagesFromTraveller")
}

type Message @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)

  text: String!
  sentBy: Traveller!  @relation(name: "MessagesFromTraveller")
}

type Location @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)

  traveller: Traveller! @relation(name: "TravellerLocation")
  latitude: Float!
  longitude: Float!
}

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

Save the HTTP endpoint for the Simple API from the output as well as the websocket endpoint for the Subscriptions API, you'll need them 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 app with your GraphQL API

5.1. Simple API

Copy the Simple API endpoint to ./src/App.js as the uri argument in the createNetworkInterface call:

const networkInterface = createNetworkInterface({ uri: '__SIMPLE_API_ENDPOINT__' })

5.2. Subscriptions API

Copy the Subscriptions API endpoint to ./src/App.js as the argument for the constructor of the SubscriptionClient:

const wsClient = new SubscriptionClient('__SUBSCRIPTIONS_API_ENDPOINT__')

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

6. Install dependencies & run locally

You're done configuring the example application.

yarn install
yarn start # open browser with: http://localhost:3000

7. Further resources

This app demonstrates how to use the Graphcool subscription API using Apollo Client. You can learn more about these technologies here:

• Tutorial: How to build a Real-Time Chat with GraphQL Subscriptions and Apollo
• Video: How to build a Real-Time Chat with GraphQL Subscriptions and Apollo
• Docs: Using GraphQL Subscriptions with Graphcool
• Blog Post: GraphQL Subscriptions in Apollo Client

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!