GraphQL のサブスクリプション入門：リアルタイム API を擬似再現する方法

チャット、ダッシュボード、ライブ通知など——リアルタイム性は現代アプリの当たり前になりつつあります。
ただし、体験がリッチになる一方で、テストの難易度は上がります。
本記事では、GraphQL のサブスクリプションの仕組みと、なぜモックが難しいのか、そしてネイティブな GraphQL モックがなくてもリアルタイム API を効果的にシミュレートする方法を紹介します。

🧩 GraphQL サブスクリプションとは？

GraphQL におけるサブスクリプションは、サーバー側のデータ更新をクライアントへプッシュ配信する仕組みです。
クライアントはWebSocketや**SSE（Server-Sent Events）**で接続を維持し、更新イベントを受け取ります。

GRAPHQL

subscription OnNewMessage {
  messageAdded {
    id
    text
    user
  }
}

新しいデータが届くと、サーバーは購読中のクライアントへイベントをブロードキャストします。
本番ではエレガントに動作しますが、ローカルや自動テストでは一気に難しくなります。

⚠️ サブスクリプションのモックが難しい理由

クエリやミューテーションのモックは「リクエスト → レスポンス」を定義するだけで済みます。
しかしサブスクリプションは継続的なデータストリームで、次のような課題があります。

WebSocket 接続などの常時接続に依存する
時系列イベント（タイミングや順序）を扱う必要がある
切断・再接続・複数クライアントを考慮する必要がある
スキーマ変更とモックの同期を維持する必要がある

そのため、多くのツールはサブスクリプションのモックを標準対応していません。
MockApiHub は現在REST のシミュレーションに注力していますが、軽量な WebSocket/イベントの擬似サーバを併用することで、フロントエンド開発やテストに十分なリアルタイム挙動を再現できます。

🧠 実践：リアルタイム API をシミュレートする方法

1. REST のポーリング

手軽な方法は、一定間隔で API を呼び出して更新のストリームを擬似再現することです。

setInterval(async () => {
const res = await fetch("https://mockapihub.com/api/messages");
const data = await res.json();
updateUI(data);
}, 3000);

予測可能で制御しやすいテストデータを得られ、MockApiHub の REST モックと相性抜群です。

2. ローカル WebSocket サーバー

サブスクリプションに近い動作を再現したい場合は、軽量な WebSocket モックを立てます。

import { Server } from "mock-socket";
const server = new Server("ws://localhost:8080");

setInterval(() => {
server.emit("message", { text: "Hello from mock server" });
}, 5000);

フロントエンドは、これを実際の GraphQL サブスクリプションのように扱えます。

3. WebSocket × REST モックのハイブリッド

規模が大きいプロジェクトでは、ハイブリッド構成が最も運用しやすいです。
静的/動的データは MockApiHub の REST から取得し、リアルタイム更新はローカルのソケット層で配信します。

BASH

[Frontend App] → [MockApiHub REST mocks] → [Local WebSocket Server] → UI updates

この構成ならテスト環境が軽く、実サービスへの依存を避けられます。

🔭 今後の展望

リアルタイムのデータストリームを完全にモックするのは難題ですが、MockApiHub を活用することで予測可能で高速なテストが可能になります。
現時点で GraphQL サブスクリプションのネイティブモックは提供していませんが、リアルタイム API を扱う開発者向けに柔軟なアプローチを検討しています。

もしGraphQL モックのサポートが必要であれば、ぜひご意見をお寄せください。
ご要望はこちらから。

🏁 まとめ

GraphQL サブスクリプションは強力なリアルタイム性をもたらしますが、テストでは動く標的を追いかけるような難しさがあります。
REST のポーリング、ローカル WebSocket、ハイブリッド構成を組み合わせれば、複雑な本番環境に依存せずに信頼できる擬似リアルタイムを再現できます。

開発フローをスムーズに。まずは MockApiHub.com で、より速い開発を体験してください。