Apollo GraphQL Subscriptions Example

Simple application used to demonstrate minimalistic setup for an Apollo GraphQL Subscriptions architecture.

System Architecture

  .---------.                            .--------.
  | Client  |-.        GET /             | Web    |
  | Browser | | -----------------------> | Server |
  '---------' |                          '--------'
    '---------'
         |
         |                               .---------.
         |          GET /graphiql        | GraphQL |
         '-----------------------------> | Server  |
                    Websocket            '---------'

• Browser starts by connecting to Web App and fetch available messages
• Web page opens websocket tunnel to GraphQL server and subscribes to new messages
• GraphQL mutations can then be submitted to the GraphQL server and new messages submitted to websocket clients for browser update

The master branch implementation uses filtering to decide if a message is to be sent to a given subscriber. The client app generates a random number to be used as the auth token. All requests placed to the GraphQL server will include the auth token in it. At the server, the auth token will be stored in the GraphQL context and eventually used by the filter function that validates if a message is intended to be sent to any given subscriber. In a real application, the GraphQL server would have to first validate the auth token against a token provider before proceding with any request.

Start Subscription Client and Server apps

In a terminal do:

cd server-app
yarn start

In another terminal

cd client-app
yarn start

Test it

1. Open a browser window with the client page
2. Open another browser window with GraphiQL Subscriptions and press ►
3. Open another browser window with GraphiQL Mutations and press ►

Your client page as well as the GraphiQL subscription page should now be displaying the new message.

Using CURL to exercise GraphQL Mutation:

curl -k -H "Content-Type: application/json" -X POST -d '{ "operationName": null, "query": "mutation AddMessage { addMessage(message: \"My CURL message\", broadcast: false) }", "variables": "{}" }' http://localhost:5060/graphql

Using the subscription Observable

Check the observable branch for the simplest subscription implementation.

Using the withApollo decorator

For an example using the withApollo decorator see the withApollo branch.

Using Apollo's subscribeToMore

Checkout subscribeToMore branch for an example implementation using Apollo's subscribeToMore subscription callback function.