Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
public
src
.gitignore
README.md
package.json
schema.graphql
yarn.lock

README.md

Subscriptions Example (with React & Apollo)

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

Worldchat

  • 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

# 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

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.

5. Connect the app with your GraphQL API

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.

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:

Help & Community Slack Status

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