useSubscriptionによるリアルタイム購読
WebSocketリンクの設定、useSubscription()、購読データのリアクティブ状態への統合
「useSubscriptionによるリアルタイム購読」はCoddyKit上の無料Vue Academyレッスンです。 これはレッスン4/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはVue Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Vue Academyコースには全4レッスンが含まれています。
サブスクリプションによるリアルタイム通信
GraphQL のサブスクリプションは、永続的な接続を通じてサーバーからクライアントへデータをプッシュします。クエリが一度だけデータを取得するのに対し、サブスクリプションは更新をストリーム配信します。チャット、ライブフィード、通知に最適です。
WebSocket トランスポート
サブスクリプションには長時間維持される接続が必要なため、HTTP ではなく WebSocket を使用します。graphql-wsライブラリは、GraphQLWsLinkを通じて最新のプロトコルを提供します。
npm install graphql-wsWebSocket リンクを作成する
graphql-wsクライアントを、wss://のサブスクリプションエンドポイントを指すGraphQLWsLinkでラップします。
import { GraphQLWsLink } from '@apollo/client/link/subscriptions'
import { createClient } from 'graphql-ws'
const wsLink = new GraphQLWsLink(createClient({
url: 'wss://api.example.com/graphql'
}))トランスポートの問題
クエリとミューテーションは引き続き HTTP で送信し、サブスクリプションは WebSocket で送信する必要があります。すべてに同じリンクを使うことはできないため、操作の種類ごとにトラフィックをsplitする必要があります。
リンクを分割する
split関数は各操作をルーティングします。解析済みの操作定義に基づき、サブスクリプションは WebSocket リンクへ、それ以外は HTTP リンクへ送ります。
import { split, HttpLink } from '@apollo/client/core'
import { getMainDefinition } from '@apollo/client/utilities'
const httpLink = new HttpLink({ uri: '/graphql' })
const link = split(
({ query }) => {
const def = getMainDefinition(query)
return def.kind === 'OperationDefinition' && def.operation === 'subscription'
},
wsLink,
httpLink
)分割したリンクをクライアントに組み込む
単純なuriの代わりに、結合したlinkを Apollo クライアントに渡します。これでクライアントは各操作のルーティング方法を認識できます。
const apolloClient = new ApolloClient({
link,
cache: new InMemoryCache()
})useSubscription の基本
useSubscriptionコンポーザブルはストリームを開き、リアクティブな状態を返します。useQueryと同様に、result、loading、errorを提供します。
import { useSubscription } from '@vue/apollo-composable'
import { gql } from '@apollo/client/core'
const { result } = useSubscription(gql(
'subscription { messageAdded { id text } }'
))プッシュごとの処理
onResultフックを使うと、プッシュされたイベントが届くたびに処理できます。ストリーミングデータを扱う自然な場所です。
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
console.log('New message', res.data.messageAdded)
})リアクティブな配列に追加する
よく使われるパターンは、ローカルのリアクティブな配列を保持し、新しいイベントが届くたびに追加する方法です。これにより、テンプレートに増え続けるライブリストが表示されます。
const messages = ref([])
const { onResult } = useSubscription(MESSAGE_ADDED)
onResult((res) => {
messages.value.push(res.data.messageAdded)
})サブスクリプションの変数
サブスクリプションにはクエリと同じように変数を渡せます。たとえば、1 つのチャットルームのメッセージだけを購読できます。
useSubscription(
gql('subscription($room: ID!) { messageAdded(room: $room) { text } }'),
{ room: 'general' }
)サブスクリプションとポーリング
ポーリングはタイマーに従ってクエリを再取得します。一方、サブスクリプションは何かが変わったときだけデータをプッシュします。真のリアルタイムデータにはサブスクリプションの方が効率的ですが、ほぼリアルタイムで十分な場合はポーリングの方が簡単です。
理解度チェック
サブスクリプションについての知識を確認しましょう。
まとめ
リアルタイムサブスクリプションについて学びました。
- サブスクリプションは、GraphQLWsLink（graphql-ws）を介して WebSocket でデータをプッシュします。
- split() を使って、サブスクリプションは WS 経由で、クエリとミューテーションは HTTP 経由で送信します。
- useSubscription はリアクティブな result を返し、プッシュごとに onResult を実行できます。
- プッシュされたイベントをリアクティブな配列に追加すると、ライブリストを作成できます。
よくある質問
「useSubscriptionによるリアルタイム購読」レッスンは無料ですか？
はい。「useSubscriptionによるリアルタイム購読」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Vue Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Vue Academyコースには全4レッスンが含まれています。
「useSubscriptionによるリアルタイム購読」で何を学びますか？
WebSocketリンクの設定、useSubscription()、購読データのリアクティブ状態への統合 ブラウザで直接実行するハンズオンコードでVue Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Vue Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのVue Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン4/4です。
「useSubscriptionによるリアルタイム購読」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このVue Academyレッスンでコードを書いて実行できますか？
はい。すべてのVue Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- Vue 3でのApollo Client設定
- データ取得のためのuseQuery
- データ変更のためのuseMutation
- useSubscriptionによるリアルタイム購読