GraphQL Subscriptionとは何ですか？

GraphQLのリアルタイム通信機能。WebSocketを使ってサーバーからクライアントにデータの変更をプッシュする。

GraphQL Subscriptionのポイントは？

Query（読み取り）、Mutation（更新）に続くGraphQLの第3の操作。WebSocket上で動作し、サーバーからリアルタイムにデータをプッシュ。チャット、通知、ダッシュボードのリアルタイム更新に活用。graphql-wsプロトコルが現在の標準

【ぐらふきゅーえるさぶすくりぷしょん】

GraphQL Subscription とは？

💡 GraphQLの「リアルタイム通知」機能

📌 このページのポイント

Query（読み取り）、Mutation（更新）に続くGraphQLの第3の操作
WebSocket上で動作し、サーバーからリアルタイムにデータをプッシュ
チャット、通知、ダッシュボードのリアルタイム更新に活用
graphql-wsプロトコルが現在の標準

GraphQL Subscription のリアルタイム通信イメージ

ひよこ

QueryやMutationとどう違うの？

ペンギン先生

Queryは「データをください（1回）」、Mutationは「データを変更してください（1回）」、Subscriptionは「データが変わったら教えてください（継続的に）」。Subscriptionを開始すると、サーバーとの接続が維持され、対象データが変更されるたびに新しいデータが自動プッシュされるんだよ

ひよこ

どうやって使うの？

ペンギン先生

スキーマ定義でtype Subscription { messageAdded(channelId: ID!): Message }のように宣言。クライアント側はconst { data } = useSubscription(gql`subscription { messageAdded(channelId: "1") { text author } }`);で購読。Apollo ClientやUrqlが内部でWebSocket接続を管理してくれるよ

ひよこ

サーバー側の実装は？

ペンギン先生

Apollo Serverの場合、PubSubインスタンスを使う。Mutationでpubsub.publish('MESSAGE_ADDED', { messageAdded: message })でイベントを発行し、Subscriptionリゾルバでpubsub.asyncIterator('MESSAGE_ADDED')でイベントを購読する。スケールする場合はRedis PubSubをバックエンドに使うよ

ひよこ

SSEと使い分けるなら？

ペンギン先生

GraphQL スキーマを統一的に使いたいならSubscription。シンプルな通知やAIストリーミングならSSE。GraphQL SubscriptionはWebSocket前提でインフラの設定が複雑になることがある。最近はGraphQL over SSE（graphql-sse）という選択肢もあって、WebSocketなしでSubscriptionが使えるよ

まとめ：ざっくりこれだけ覚えればOK！

「GraphQL Subscription」って出てきたら「GraphQLのリアルタイムデータ配信機能」と思えればだいたいOK！

📖 おまけ：英語の意味

「GraphQL Subscription」＝ GraphQL購読

💬 Subscribe（購読する）。特定のイベントを購読して、発生時に通知を受け取るよ

← 用語集にもどる