How to Implement Real Time Updates in GraphQL

To implement real time updates in GraphQL, use subscriptions which allow clients to listen for live data changes. Subscriptions work over WebSocket connections and send updates from the server to clients automatically when data changes.

Syntax

A GraphQL subscription defines a real-time event stream that clients can subscribe to. It looks like a query but uses the subscription keyword. The server pushes data to clients when events occur.

• subscription: keyword to define a subscription operation.
• Event name: the subscription field that triggers updates.
• Selection set: fields to receive in real-time updates.

graphql

subscription OnMessageAdded {
  messageAdded {
    id
    content
    author
  }
}

Example

This example shows a simple GraphQL server using subscriptions with Apollo Server. It sends real-time messages to subscribed clients when a new message is added.

javascript

const { ApolloServer, gql, PubSub } = require('apollo-server');

const pubsub = new PubSub();
const MESSAGE_ADDED = 'MESSAGE_ADDED';

const typeDefs = gql`
  type Message {
    id: ID!
    content: String!
    author: String!
  }

  type Query {
    messages: [Message!]
  }

  type Subscription {
    messageAdded: Message
  }

  type Mutation {
    addMessage(content: String!, author: String!): Message
  }
`;

const messages = [];

const resolvers = {
  Query: {
    messages: () => messages,
  },
  Mutation: {
    addMessage: (parent, { content, author }) => {
      const message = { id: messages.length + 1, content, author };
      messages.push(message);
      pubsub.publish(MESSAGE_ADDED, { messageAdded: message });
      return message;
    },
  },
  Subscription: {
    messageAdded: {
      subscribe: () => pubsub.asyncIterator([MESSAGE_ADDED]),
    },
  },
};

const server = new ApolloServer({ typeDefs, resolvers });

server.listen().then(({ url }) => {
  console.log(`Server ready at ${url}`);
});

Output

Server ready at http://localhost:4000/

Common Pitfalls

Common mistakes when implementing GraphQL subscriptions include:

• Not setting up a WebSocket server to handle subscription connections.
• Forgetting to publish events after data changes, so clients never receive updates.
• Using subscriptions like queries without understanding they require persistent connections.
• Not handling client reconnections or errors in the subscription stream.

Always ensure your server supports WebSocket and your client uses a subscription client library.

javascript

/* Wrong: Mutation does not publish event, so no updates sent */
addMessage: (parent, { content, author }) => {
  const message = { id: messages.length + 1, content, author };
  messages.push(message);
  return message; // Missing pubsub.publish
}

/* Right: Publish event after adding message */
addMessage: (parent, { content, author }) => {
  const message = { id: messages.length + 1, content, author };
  messages.push(message);
  pubsub.publish(MESSAGE_ADDED, { messageAdded: message });
  return message;
}

Quick Reference

Key points for GraphQL subscriptions:

Concept	Description
subscription	Defines real-time data stream in GraphQL schema
PubSub	Publish-subscribe system to send events from server to clients
WebSocket	Protocol used for persistent connection for subscriptions
asyncIterator	Method to create event stream for subscriptions
Client	Must use subscription client to listen for updates

Key Takeaways

Use GraphQL subscriptions with WebSocket to enable real-time updates.

Publish events on the server after data changes to notify subscribed clients.

Clients must maintain a persistent connection to receive live data.

Set up a PubSub system on the server to manage event broadcasting.

Handle connection errors and reconnections for reliable updates.