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

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

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

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

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 ID of your service, 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.

Paste your service ID to ./src/components/App.js as the value for the currently empty serviceId variable:

const serviceId = `__YOUR_SERVICE_ID__`

Note: You can always get access to your service ID by running the graphcool info command.

You're done configuring the example application.

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

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

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