メッセージ機能の無限ローディングとSubscriptionを設計する

ゴール

メッセージ画面で上部にいった時に次の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-suke

Subscription機能とは何かわかること

以下回答

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-suke

Subscription機能を実現する方法がわかること

解決策は以下

NestJSでは以下の記事の対応が必要そう

URQLでは以下の対応が必要だがusersで既に実装済み

GraphQL Code GeneratorでもSubscription用のdocumentを作る必要がありそう

mu-suke

途中経過

NestJS側でsubscriptionの実装はできたがクライアント側ではうまく表示できない

以下のようにレスポンスを今あるメッセージに混ぜる処理が必要っぽい

const handleSubscription = (messages = [], response) => {
  return [response.newMessages, ...messages];
};

mu-suke

GraphQL PlaygroundではSubscriptionが動くようになった
がクライアント（Next.js）だと以下のようなログになり全く機能しない

result:
  data: undefined
  error: undefined
  extensions: undefined
  fetching: false
  operation: undefined
  stale: false

mu-suke

手詰まりしたので明日相談する

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さんに教えてもらったけど本当にややこしい笑