Real-Time Subscriptions with GraphQL and Node.js

In the last blog, “ GraphQL Mutation: GraphQL Essentials Part 2 ” , we learned how to generate mutations by building a real-world application.

Please go through the introduction if you are a beginner in the world of GraphQL .

In this article, we will learn GraphQL Subscriptions and how to build a real-world application.

What are GraphQL subscriptions?

Subscriptions can bring real-time features to your apps. It means we can subscribe to data and get notified in real-time when changes occur as subscriptions use web sockets that allow for bidirectional real-time communication between the server and the client. This will sync the data between the client and the server.

Before diving deep into the code, let us learn the basics of the polling vs pub-sub:

Polling is the method of calling an API repeatedly after a determined time delay. Latency can be problematic in systems with layers of polling. This inflate the delay of data well beyond what was originally intended.

Publish/Subscribe mechanism works quite well to push the updates/notifications to the client and can handle event-driven system efficiently and at a scale.

In our application, we will be using the package called PubSub (imported from graphql-yoga) that lets you wire up GraphQL with a pubsub system to implement subscriptions in GraphQL .

For production, it is recommended to use the pubsub implementation of Redis

To set up the complete project, kindly go back to part 1 of these 3 part series:

Create a Subscription.js file in the root of our project folder “graphql_nodejs”:

touch Subscription.js

First, we will import the PubSub from graphql-yoga and initialize the pubsub object and use its properties.

Let us create the custom type definition called Subscription . We will create the Post subscription where the client will get the real-time notifications whenever new posts are created, old posts are deleted, and updates occur.

Defining a GraphQL the Subscription type in your schema:

Here the arguments for the post is not required as we are defining for the default subscription for each post which will get changed on create, update, and delete

Defining a GraphQL PostSubscriptionPayload type in your schema:

mutation : This defines the type of mutation we will perform. It can be create a post, delete a post, and update a post.

data : This defines the data which results in the Post type.

To use the pubsub , we need to provide it inside the context so that it can be used inside any resolvers

Now we can create the Subscription type resolver using the pubsub.asyncIterator to map the event we need. The asyncIterator takes the channel name through which the event across the app will be mapped and recommendation here is to use the unique identifier/channel name:

Create Post Mutation

Pubsub’s publish() function will take the event name as the first parameter and it will publish the data to the subscribers as seen in the second param.

Mutation: CREATED is the name given for when the new post is created, and accordingly the client will get notified of the new post.

Now run the GraphQL server for createPost mutation, it will output as follows:

Now, run the below subscription for the post created in our GraphQL server

Generic for the post subscription

Subscription for Post Created

notification on creation of new post

Delete Post Mutation

For the deletePost function, we first check whether the posts exists or not, and throw the exceptions if there is no post for related id

Mutation: DELETED is the name given for when a post is deleted, and accordingly the client will get a notification once the post is deleted.

Subscription for Post Deleted

Update Post Mutations

Update Post — GraphQL Server

Subscription for Post Updated

notification on post updated

Resources

GraphQL — The official website

Learn GraphQL — GraphQL tutorials

Real-time GraphQL - Subscriptions with GraphQL