Real Time GraphQL — Chat (Part 2 Client)

Welcome back. In the last post we setup GraphQL Subscriptions with a little help from 2 Apollo packages:

• https://github.com/apollographql/graphql-subscriptions
• https://github.com/apollographql/subscriptions-transport-ws

If you haven’t read that post, it’s a combination of background and server side of the Chatroom we’re building.

• Part 1
• API Server

All the code for todays section can be found here, clone and star before moving on! :)

We’re going to add real time behavior to a currently non-reactive Message list. Chat is a great example of a product that needs data as fresh as possible.

Subscription Network Interface

GraphQL Clients operate across networks (HTTP/WSS) and Apollo Client gives you a configurable piece called the networkInterface. The base network interface is via HTTP, but we are going to add a subscription interface as well.

We’re going to create a base network interface at the /graphql url. Our UI is proxying to the API Server via http-proxy. With the help of subscriptions-transport-ws we create a new SubscriptionClient at the API Server’s web-socket path and addGraphQLSubscriptions to our base network interface.

With that, our GraphQL client can speak over web sockets.

Subscription Document

Now remember, subscriptions are another operation type. So we need to create a subscription document: