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

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

チュートリアルの総括

  • GraphQLサブスクリプションの作成方法を理解している

GraphQLの基本的な使い方を学んだので、次はサーバーとクライアントの構造を理解しましょう。

Did you find this page helpful?
Start with GraphQL on Hasura for Free
  • ArrowBuild apps and APIs 10x faster
  • ArrowBuilt-in authorization and caching
  • Arrow8x more performant than hand-rolled APIs
Promo
footer illustration
Brand logo
© 2024 Hasura Inc. All rights reserved
Github
Titter
Discord
Facebook
Instagram
Youtube
Linkedin