サブスクリプション - リアルタイム更新

GraphQLスペックは、GraphQLクエリのようなサブスクリプションと呼ばれるものを可能にします。しかし、1つの読み取りでデータが返す代わりに、サーバーからプッシュされたデータを取得します。

アプリで「イベント」や「ライブ結果」をバックエンドからサブスクライブするのに便利なだけでなく、アプリからイベントの「内容」を管理することも可能です。

GraphQLサブスクリプションは、アプリにリアルタイムやリアクティブな機能を容易に追加するための重要なコンポーネントです。サブスクリプションをサポートするGraphQLクライアントとサーバーは、ウェブソケットコードの処理に頼ることなく、優れたエクスペリエンスを構築できます。

初めてのGraphQLサブスクリプションを作成しましょう

Step 1: https://hasura.io/learn/graphql/graphiql に移動します

Step 2: テキストエリアに以下のGraphQLクエリを書き込みます

subscription {
  online_users {
    id
    last_seen
    user {
      name
    }
  }
}

ステップ3：プレイボタンをクリックします。

オンラインユーザーのセットが変更されるたびに、右側の応答ウィンドウに最新のセットが表示されます。

GraphQLサブスクリプションの仕組み

GraphQLのクエリとミューテーションは、POSTエンドポイントに送信される文字列です。GraphQLサブスクリプションではどうでしょうか。GraphQLサブスクリプションの場合、POSTエンドポイントで同様なことは起こり得ません。なぜならHTTPエンドポイントの場合、単に応答を返すだけで接続が閉じてしまうからです。

GraphQLサブスクリプションとは、ウェブソケットのエンドポイントに送信されるサブスクリプションクエリの文字列です。そして、バックエンドでデータが変更されるたびに、新しいデータがウェブソケットを介してサーバーからクライアントにプッシュされます。