ストリーミングページネーション

さらに、usePaginationFragmentをRelayの段階的データ配信機能と組み合わせて、接続を取得し、すべてのアイテムのリストが1つのペイロードで返されるのを待つのではなく、接続内の各アイテムが準備され次第段階的に受信できます。これは、たとえば接続内の各アイテムを計算することがサーバーで高価な操作であり、必要なすべてのアイテムが利用可能になるのをブロックすることなく、リストの最初のアイテムをできるだけ早く表示したい場合に役立ちます。たとえば、ニュースフィードでは、ユーザーは最初のストーリーを見て操作を開始し、追加のストーリーが下にロードされるのを理想とするでしょう。

そのためには、@connectionディレクティブではなく、@stream_connectionディレクティブを使用します。

import type {FriendsListComponent_user$key} from 'FriendsList_user.graphql';

const React = require('React');

const {graphql, usePaginationFragment} = require('react-relay');

type Props = {
  user: FriendsListComponent_user$key,
};

function FriendsListComponent(props: Props) {
  // ...

  const {
    data,
    loadNext,
    hasNext,
  } = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @stream_connection(key: "FriendsList_user_friends", initial_count: 2,) {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  return (...);
}

module.exports = FriendsListComponent;

ここで何が起こっているかについて

• @stream_connectionディレクティブは、@connectionディレクティブの代わりに直接使用できます。これは、@connectionと同じ引数と、ストリーミングを制御する追加のオプションパラメーターを受け付けます。
  • initial_count: Int: どの項目を最初のペイロードに含めるかを制御する数値 (既定値は 0)。以降の項目はストリーミングされるので、0 に設定するとリストは当初空になり、すべての項目がストリーミングされます。この数値は返される 合計 項目数には影響せず、最初のペイロードに含める項目数だけに影響することに注意してください。例えば、本日 2 つの項目の初回フェッチを行ってから、3 つ追加でフェッチするために すぐに ページネーションクエリを発行する製品を考えてみてください。ストリーミングを使用すると、この製品は代わりに `initial_count=2` を使用して最初のクエリで 5 つの項目をフェッチし、2 つの項目を素早くフェッチして、以降の 3 つの項目でラウンドトリップを回避できます。
• usePaginationFragment の通常の使用法と同様に、新しい項目がサーバーからストリーミングされると接続は自動的に更新され、コンポーネントは接続内の最新の項目を使用して毎回再レンダリングされます。

---

このページは役に立ちましたか?

簡単な質問に お答えいただければ、サイトの改善にお役立ていただけます.