串流分頁

此外，我們可以結合 usePaginationFragment 與 Relay 的增量資料傳遞功能，以便獲取連線，並在連線中的每個項目準備好時增量接收，而不是等待整個項目列表在單一酬載中返回。當例如在伺服器上計算連線中的每個項目是一項昂貴的操作，並且我們希望能夠儘快顯示列表中的第一個項目（或多個項目），而不必等待所有需要的項目都可用時，這會很有用；例如，在新聞摘要中，使用者理想情況下可以先看到第一個故事並開始與之互動，同時在下方載入其他故事。

為了這樣做，我們可以改用 @stream_connection 指令，而不是 @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：一個數字（預設為零），控制初始酬載中包含的項目數量。任何後續項目都會串流傳輸，因此當設定為零時，列表最初會是空的，並且所有項目都會串流傳輸。請注意，此數字不會影響返回的項目總數，只會影響初始酬載中包含的項目數量。例如，考慮一個產品，它今天會初始提取 2 個項目，然後立即發出分頁查詢以提取另外 3 個項目。使用串流，此產品可以選擇在初始查詢中提取 5 個項目，並將 initial_count=2，以便快速提取 2 個項目，同時避免為後續的 3 個項目進行往返。
• 與常規使用 usePaginationFragment 一樣，當新項目從伺服器串流傳入時，連線會自動更新，並且元件會每次使用連線中的最新項目重新渲染。

---

這個頁面有用嗎？

請協助我們讓網站變得更好 回答幾個快速問題.