Lesson Overview

Welcome to this lesson on "Setting Up Subscriptions for Real-Time Data". In this lesson, we will discuss real-time data and subscriptions to events in GraphQL.

GraphQL Subscriptions enable clients to listen for real-time updates from the server. When an event that matches the subscription’s criteria occurs, the server sends the updated data to the client automatically.

This is how subscriptions differ from Queries and Mutations:

  • Queries: Request data from the server.
  • Mutations: Modify data on the server.
  • Subscriptions: Receive updates whenever data is changed as specified.
Setting Up Apollo Server with Subscriptions

Let's begin by setting up our Apollo Server to handle subscriptions. We'll start by initializing our server and defining our schema, including the Subscription type.

We'll also be using graphql-ws for WebSocket communication, which allows our resolvers to notify clients about real-time updates.

Defining Schema and Resolvers with Subscriptions

In this section, we'll define the schema with a type definition that includes a Subscription type.

The Subscription type defines a bookAdded field, which is of type Book.

Writing Resolver Functions

Next, we need to implement resolver functions for these subscriptions. We will use Pubsub for it.

Pubsub serves as an event bus that allows publishing events (pubsub.publish) and subscribing to those events (pubsub.asyncIterator). In this case, it manages the event stream for the BOOK_ADDED event, enabling clients to subscribe to notifications about newly added books. Whenever the server publishes a BOOK_ADDED event, the asyncIterator sends the event's data (bookAdded: newBook) to all subscribed clients. Each event in this stream corresponds to a new book being added.

This allows subscribed clients to receive real-time updates about the new book.

Here, when a book is added using the addBook mutation, the new book data is sent to all clients subscribing to the bookAdded subscription through the pubsub.publish method.

Integrating WebSocket for Real-Time Updates

WebSockets are a communication protocol that enables two-way, persistent communication between a client and a server. Unlike traditional HTTP, where each request-response cycle creates a new connection, WebSockets keep a single connection open, enabling real-time data exchange without waiting for client requests. Whenever an event occurs, the server sends data to the connected client over the WebSocket.

We'll integrate WebSockets into our Apollo Server setup using graphql-ws to handle subscriptions.

When you run this code, your server should be ready to handle real-time subscriptions.

Requesting Subscriptions after Setting Up the Server

After setting up the server to handle subscriptions, it's essential to know how to request and subscribe to real-time data updates. Below, we will provide step-by-step instructions for setting up a client to request subscriptions using graphql-ws.

Define subscription queries in the client application:

Executing Queries and Mutations

Execute the defined queries and mutations.

Summary

In this lesson, we:

  • Discussed real-time data and its importance.
  • Introduced GraphQL Subscriptions and compared them with Queries and Mutations.
  • Set up Apollo Server with subscriptions using graphql-ws.
  • Defined schema and resolver functions.
  • Integrated WebSockets for real-time updates.

By following this lesson, you have learned how to handle real-time subscriptions using Apollo Server 4 and graphql-ws. You’re now ready to move on to the practice exercises.

Sign up
Join the 1M+ learners on CodeSignal
Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal