ReactとApolloでgraphqlサブスクリプションを使用してリアルタイムアプリケーションを作成する

Question

React、Apollo、GraphQLを使用してリアルタイムアプリケーションを構築しています。私の計画は、コンポーネントがクエリを発行し、その後サブスクリプションに依存して、クライアントキャッシュをバックエンドデータとリアルタイムで一貫性を保つことです。しかし、コンポーネントがアンマウントされたときにサブスクリプションの登録を解除する必要があるため、これが機能するとは思われません。コンポーネントが再度マウントされると、結果はクエリキャッシュからフェッチされるため、サブスクリプションがオフになってから間に発生したすべての変更が失われるため、実際には古くなってしまいます。さらにサブスクリプションをオンにすると、変更が間に合わなかったために結果が乱れることになります。例えばについて

Iは、クエリがある場合、成分Aは、 -

query { 
    customers { 
    id 
    name 
    phoneNo 
    } 
} 

とサブスクリプション： -

subscription customersUpdated { 
    customersUpdated { 
    id 
    name 
    phoneNo 
    } 
} 

をAが最初に取り付けられますときcustomersクエリが実行されます。結果はキャッシュされます。顧客データへの変更はすべて、サブスクリプションcustomersUpdatedの助けを借りて記録されます。サブスクリプションはすべての顧客を返すのではなく、クエリキャッシュにマージする必要のある変更だけを返すことに注意してください。 Aがアンマウントされると、私はサブスクリプションから退会します。 Aが現在のユーザーに対してアンマウントされている間に、別のユーザーが顧客データを5回変更したとします。 Aが再びマウントされると、これらの5つの変更が失われ、クエリはキャッシュから結果をフェッチします。サブスクリプションは再び開始されますが、データが悪い状態にあるのは、これらの5つの変更が欠落しており、これを取得できないためです。

ここでサブスクリプションを使用するための正しいパターンは何ですか？私はアプリケーションをリアルタイムで動作させたいので、クエリを使った時間ベースの再フェッチを避けようとしています。またリアルタイムでは、すべてのデータを不必要に引き上げるのではなく、変更を取り入れるだけです。

Answer 1

はあなたが行うことができますいくつかあります：あなたは日付データときにコンポーネントマウントまでを取得するよう

1. は単に、あなたのGraphQLクエリにnetwork-onlyまたはcache-and-networkフェッチポリシーを使用します。いつものように購読を初期化してください。
2. コンポーネントがアンマウントされたときにサブスクリプションを停止しないで、サブスクリプションのライフサイクルをコンポーネント外で処理します。これはもっとうまくいくかもしれませんが、開始時と終了時を制御できます。

しかし、アプリのどの部分が実際にリアルタイムである必要があるかについてもっと考えてみることをおすすめします。ほとんどのアプリケーションでは、経験のわずかな部分だけが低レイテンシのデータ更新を必要とするため、小規模なケースでのみサブスクリプションを使用する方が良い戦略かもしれません。一日の終わりには、ステートレスアーキテクチャのスケーリングの理由を考える方がしばしば簡単です。