June 20, 2022 2 min read

GraphQL Subscriptions: Real-Time Data with Azure

GraphQL subscriptions enable real-time data push to clients over WebSocket connections. Azure services support building subscription-enabled GraphQL APIs.

Schema Definition

type Subscription {
  orderUpdated(customerId: ID!): Order!
  inventoryChanged(productId: ID!): InventoryUpdate!
  priceAlert(threshold: Float!): PriceAlert!
}

type Order {
  id: ID!
  status: OrderStatus!
  items: [OrderItem!]!
}

enum OrderStatus {
  PENDING
  PROCESSING
  SHIPPED
  DELIVERED
}

Implementation with Hot Chocolate

public class Subscription
{
    [Subscribe]
    [Topic("OrderUpdated_{customerId}")]
    public Order OrderUpdated(
        [EventMessage] Order order,
        string customerId) => order;

    [Subscribe]
    public IAsyncEnumerable<InventoryUpdate> InventoryChanged(
        string productId,
        [Service] IInventoryService service)
    {
        return service.WatchInventory(productId);
    }
}

// Publishing events
public class OrderService
{
    private readonly ITopicEventSender _eventSender;

    public async Task UpdateOrderAsync(Order order)
    {
        await _repository.UpdateAsync(order);
        await _eventSender.SendAsync(
            $"OrderUpdated_{order.CustomerId}",
            order);
    }
}

Client Subscription

import { createClient } from 'graphql-ws';

const client = createClient({
  url: 'wss://api.example.com/graphql',
});

client.subscribe(
  {
    query: `subscription ($customerId: ID!) {
      orderUpdated(customerId: $customerId) {
        id
        status
        items { productId quantity }
      }
    }`,
    variables: { customerId: 'customer-123' },
  },
  {
    next: (data) => console.log('Order update:', data),
    error: (error) => console.error('Subscription error:', error),
    complete: () => console.log('Subscription complete'),
  }
);

Summary

GraphQL subscriptions provide elegant real-time communication, ideal for dashboards, notifications, and live updates.

References: