メッセージ機能の無限ローディングとSubscriptionを設計する
mu-sukeゴール
- メッセージ画面で上部にいった時に次のn件を表示する機能は無限ローディングと同じ方法で実装しても良いか理解すること
- Subscription機能とは何かわかること
- Subscription機能を実現する方法がわかること
環境
| ツール・ライブラリ | 用途 | バージョン |
|---|---|---|
| Next.js | フロントエンドとして利用 | 12.1.6 |
| NestJS | サーバーサイドとして利用 | 8.4.6 |
| GraphQL Code Generator | コード自動生成ツール | 2.6.2 |
| URQL | GraphQL Clientのライブラリ | 2.2.1 |
| node.js | フロント、サーバーサイドの実行環境 | v16.14.2 |
mu-sukeSubscription機能とは何かわかること
以下回答
Subscriptions are useful for notifying your client in real time about changes to back-end data, such as the creation of a new object or updates to an important field.
訳）新しいオブジェクトの作成や更新があったバックエンドのデータをリアルタイムに通知する仕組み
mu-sukeSubscription機能を実現する方法がわかること
解決策は以下
- NestJSでは以下の記事の対応が必要そう
- URQLでは以下の対応が必要だがusersで既に実装済み
- GraphQL Code GeneratorでもSubscription用のdocumentを作る必要がありそう
mu-suke途中経過
NestJS側でsubscriptionの実装はできたがクライアント側ではうまく表示できない
以下のようにレスポンスを今あるメッセージに混ぜる処理が必要っぽい
const handleSubscription = (messages = [], response) => {
return [response.newMessages, ...messages];
};
mu-sukeGraphQL PlaygroundではSubscriptionが動くようになった
がクライアント（Next.js）だと以下のようなログになり全く機能しない
result:
data: undefined
error: undefined
extensions: undefined
fetching: false
operation: undefined
stale: false
手詰まりしたので明日相談する
mu-suke解決
NestJS側でsubscriptionの実装はできたがクライアント側ではうまく表示できない
推奨されていたgraphql-wsではなくsubscriptions-transport-wsを使うことで正常に動作することが確認できた
mu-suke
Confusingly, the subscriptions-transport-ws library calls its WebSocket subprotocol graphql-ws, and the graphql-ws library calls its subprotocol graphql-transport-ws! In this article, we refer to the two libraries (subscriptions-transport-ws and graphql-ws), not the two subprotocols.
sutoさんに教えてもらったけど本当にややこしい笑