RelayにおけるuseSubscriptionの使用例

kobo

概要

Relayでデータの変更を動的に検知、取得する仕組み

に公式のAPI説明があるが、情報が不足しているため、まとめておく

kobo

前提条件

subscriptionを使うためには、GraphQLサーバー側がsubscriptionに対応している必要がある。
- websocketで通信を行う
subscription clientの設定を書く必要がある
- 以下のURLが良い！
- https://relay.dev/docs/guided-tour/updating-data/graphql-subscriptions/#configuring-the-network-layer

kobo

スキーマ

import { graphql } from 'relay-runtime';

export default graphql`
  subscription sampleSubscription {
    chatList {
      messages {
        text
      }
    }
  }
`;

kobo

コンポーネント

import { FC, useMemo, useState } from 'react';
import { useSubscription } from 'react-relay';
import subscription from '@/subscriptions/sample';
import { sampleSubscription } from '@/subscriptions/__generated__/sampleSubscription.graphql';
export { sample as getServerSideProps } from '@/controllers/relay/sample';

const Sample: FC = () => {
  const [data, setData] = useState<string[]>([]);
  useSubscription<sampleSubscription>(
    useMemo(
      () => ({
        variables: {},
        subscription,
        onNext: (data) => {
          if (data?.messages) {
            setData(data.messages.map(({ text }) => text));
          }
        },
      }),
      []
    )
  );

  return <>{data.map((item) => item)}</>;
};

export default Sample;

onNextにデータが返ってくるので、それをステートに突っ込む

Relayは通常preloadをしてキャッシュに詰め込むが、ここはステートに突っ込むっぽい感じがしている

kobo

差分だけがonNextに来るのかなーと思ったけど、全部きてそうだった

kobo

コンポーネントがアンマウントした時にunsubscribeしないといけない気がするけど、それはどうするんだろう？

kobo

useSubscriptionの第二引数に何かがなげれそう

Arguments
config: a config of type GraphQLSubscriptionConfig passed to requestSubscription
requestSubscriptionFn: ?<TSubscriptionPayload>(IEnvironment, GraphQLSubscriptionConfig<TSubscriptionPayload>) => Disposable. An optional function with the same signature as requestSubscription, which will be called in its stead. Defaults to requestSubscription.

kobo

Behavior
This is only a thin wrapper around the requestSubscription API. It will:
Subscribe when the component is mounted with the given config
Unsubscribe when the component is unmounted
Unsubscribe and resubscribe with new values if the environment, config or requestSubscriptionFn changes.
If you have the need to do something more complicated, such as imperatively requesting a subscription, please use the requestSubscription API directly.
See the GraphQL Subscriptions Guide for a more detailed explanation of how to work with subscriptions.

ビヘイビア
これはrequestSubscription APIの薄いラッパーに過ぎません。これは、以下のようになります：
与えられたコンフィグでコンポーネントがマウントされたときにサブスクライブします。
コンポーネントがアンマウントされたときに配信を停止する
環境、設定、requestSubscriptionFnが変更された場合、新しい値で購読を解除し、再購読することができます。
サブスクリプションを強制的に要求するなど、より複雑なことを行う必要がある場合は、requestSubscription APIを直接使用してください。
サブスクリプションの操作方法についてのより詳細な説明については、『GraphQL Subscriptions Guide』を参照してください。

kobo

何も投げなくても勝手にしてくれるっぽい

kobo

ローディングは多分、suspenseが発火しているのではなかろうかと思ってるけど、一応検証

kobo

来てない。🤔

kobo

あーそうか、普通にstateを表示してるだけだから、やるなら自分でやれということか

kobo

メモ

ちなみに、特定の条件がくるまでsubscribeをスキップしたいみたいなものについて

で話されてる

kobo

subscriptionとfragmentを同時に使う場合どうなるのか？

subscriptionでもfragmentを使いたいと思うけど、onNextでしか入手できなかったらstateにぶち込むしかない？

普通にそのままcomponentにref渡したいけど、、

kobo

色々話してくれてそう

kobo

なんか根本的に使い方を間違えている気がしてきた

kobo

updaterでstoreにアクセスしているものが出てきたから、あくまでもsubscriptionはデータが更新された時に更新部分をsubscriptionでwatchして、updaterでstoreを更新するというだけに使う説

kobo

なので、実際にはqueryで叩いて、差分が現れる部分（チャットだと最新のチャットを読み込むとかそういう部分）のみをwatchしてupdaterでstoreを更新するみたいな使い方説

kobo

こういうやつ（full exampleが見つかってないのでなんともだけど

kobo

これだとすると、そもそもgraphqlのsubscription自体、そういうものということになるので、graphql subscriptionのexampleを探してみる

kobo

Apolloが結構良さげなドキュメントを書いてくれている

やっぱりそうっぽい

kobo

ということで作り直してみる

kobo

データはusePreloadedQueryで取得

updaterで更新をかける

subscriptionでのupdaterのサンプルコードは見当たらなかったが、mutationだとあったのでそれを参考にする

function sharedUpdater(
  store: RecordSourceSelectorProxy,
  userId: string,
  newEdge: RecordProxy
) {
  const userProxy = store.get(userId);
  if (!userProxy) {
    return;
  }
  const connection = ConnectionHandler.getConnection(
    userProxy,
    "TodoList_todos"
  );
  if (!connection) {
    return;
  }
  ConnectionHandler.insertEdgeAfter(connection, newEdge);
}