usePaginationFragment

usePaginationFragment

您可以使用 usePaginationFragment 來渲染使用 @connection 的片段並在其上進行分頁

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

const React = require('React');

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

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

function FriendsList(props: Props) {
  const {
    data,
    loadNext,
    loadPrevious,
    hasNext,
    hasPrevious,
    isLoadingNext,
    isLoadingPrevious,
    refetch, // For refetching connection
  } = usePaginationFragment(
    graphql`
      fragment FriendsListComponent_user on User
      @refetchable(queryName: "FriendsListPaginationQuery") {
        name
        friends(first: $count, after: $cursor)
        @connection(key: "FriendsList_user_friends") {
          edges {
            node {
              name
              age
            }
          }
        }
      }
    `,
    props.user,
  );

  return (
    <>
      <h1>Friends of {data.name}:</h1>

      <List items={data.friends?.edges.map(edge => edge.node)}>
        {node => {
          return (
            <div>
              {node.name} - {node.age}
            </div>
          );
        }}
      </List>
      <Button onClick={() => loadNext(10)}>Load more friends</Button>
    </>
  );
}

module.exports = FriendsList;

參數

• fragment：使用 graphql 範本字面值指定的 GraphQL 片段。
  • 此片段必須在連線欄位上具有 @connection 指令，否則使用它會拋出錯誤。
  • 此片段必須具有 @refetchable 指令，否則使用它會拋出錯誤。@refetchable 指令只能新增至「可重新提取」的片段，也就是在 Viewer 或 Query 類型上宣告的片段，或實作 Node 的類型（即具有 id 的類型）。
    • 請注意，您不需要手動指定分頁查詢。@refetchable 指令將會自動產生具有指定 queryName 的查詢。這也會為查詢產生 Flow 類型，可從產生的檔案匯入：<queryName>.graphql.js。
• fragmentReference：片段參考是 Relay 使用的不透明 Relay 物件，用於從儲存區讀取片段的資料；更具體來說，它包含應該從哪個特定物件執行個體讀取資料的相關資訊。
  • 片段參考的類型可以從產生的 Flow 類型匯入，從檔案 <fragment_name>.graphql.js，並且可用於宣告您的 Props 的類型。片段參考類型的名稱將是：<fragment_name>$key。我們使用我們的 lint 規則 來強制執行片段參考屬性的類型已正確宣告。

傳回值

包含以下屬性的物件

• data：包含已從 Relay 儲存區讀取的資料的物件；該物件符合指定片段的形狀。
  • 資料的 Flow 類型也會符合此形狀，並包含衍生自 GraphQL 結構描述的類型。
• isLoadingNext：布林值，表示目前是否正在傳輸連線中下一個項目的分頁請求，包括任何增量資料酬載。
• isLoadingPrevious：布林值，表示目前是否正在傳輸連線中上一個項目的分頁請求，包括任何增量資料酬載。
• hasNext：布林值，表示是否已在「向前」方向到達連線的結尾。如果該方向有更多項目要查詢，則為 true；否則為 false。
• hasPrevious：布林值，表示是否已在「向後」方向到達連線的結尾。如果該方向有更多項目要查詢，則為 true；否則為 false。
• loadNext：用於在「向前」方向擷取連線中更多項目的函式。
  • 參數
    • count: 數字，表示要在分頁請求中查詢的項目數量。
    • options：[選用] 選項物件
      • onComplete：每當重新提取請求完成時（包括任何增量資料酬載）將會呼叫的函式。如果請求期間發生錯誤，則會使用 Error 物件作為第一個參數來呼叫 onComplete。
  • 傳回值
    • disposable：包含 dispose 函式的物件。呼叫 disposable.dispose() 將會取消分頁請求。
  • 行為
    • 呼叫 loadNext 不會導致元件暫停。相反地，當請求正在傳輸時，isLoadingNext 值會設為 true，並且分頁請求中的新項目會新增至連線，導致元件重新渲染。
    • 從呼叫 loadNext 起始的分頁請求一律會使用最初用於擷取連線的相同變數，除了分頁變數（需要變更才能執行分頁）；在分頁期間變更分頁變數以外的變數沒有意義，因為那表示我們會查詢不同的連線。
• loadPrevious：用於在「向後」方向擷取連線中更多項目的函式。
  • 參數
    • count: 數字，表示要在分頁請求中查詢的項目數量。
    • options：[選用] 選項物件
      • onComplete：每當重新提取請求完成時（包括任何增量資料酬載）將會呼叫的函式。如果請求期間發生錯誤，則會使用 Error 物件作為第一個參數來呼叫 onComplete。
  • 傳回值
    • disposable：包含 dispose 函式的物件。呼叫 disposable.dispose() 將會取消分頁請求。
  • 行為
    • 呼叫 loadPrevious 不會導致元件暫停。相反地，當請求正在傳輸時，isLoadingPrevious 值會設為 true，並且分頁請求中的新項目會新增至連線，導致元件重新渲染。
    • 從呼叫 loadPrevious 起始的分頁請求一律會使用最初用於擷取連線的相同變數，除了分頁變數（需要變更才能執行分頁）；在分頁期間變更分頁變數以外的變數沒有意義，因為那表示我們會查詢不同的連線。
• refetch：用於重新提取連線片段並使用可能的新變數集的函式。
  • 參數
    • variables：包含用於擷取 @refetchable 查詢的新變數值集的物件。
      • 這些變數需要符合片段內參照的 GraphQL 變數。
      • 但是，只需要指定要在重新提取請求中變更的變數；從此輸入中省略的片段所參照的任何變數，都會回到使用原始父查詢中指定的值。因此，舉例來說，若要使用最初擷取的完全相同的變數重新提取片段，您可以呼叫 refetch({})。
      • 同樣地，$id 變數傳遞 id 值為選用，除非片段想要以不同的 id 重新提取。當重新提取 @refetchable 片段時，Relay 會知道已渲染物件的 ID。
    • options：[選用] 選項物件
      • fetchPolicy：根據可用的快取資料，判斷是否應使用快取資料，以及何時傳送網路請求。請參閱 擷取原則 區段以取得完整規格。
      • onComplete：每當重新提取請求完成時（包括任何增量資料酬載）將會呼叫的函式。
  • 傳回值
    • disposable：包含 dispose 函式的物件。呼叫 disposable.dispose() 將會取消重新提取請求。
  • 行為
    • 使用新的變數集呼叫 refetch 將會使用新提供的變數再次擷取片段。請注意，您需要提供的變數只有片段內參照的變數。在此範例中，這表示透過將新值傳遞至 lang 變數，來擷取目前渲染的留言的翻譯內文。
    • 呼叫 refetch 將會重新渲染您的元件，並且可能會導致它暫停，視指定的 fetchPolicy 以及是否有可用的快取資料或是否需要傳送並等待網路請求而定。如果重新提取導致元件暫停，您需要確定有 Suspense 界限包裝此元件。
    • 如需有關暫停的更多詳細資訊，請參閱我們的 使用暫停的載入狀態 指南。

行為

• 元件會自動訂閱片段資料的更新：如果此特定 User 的資料在應用程式中的任何位置更新（例如，透過擷取新資料或變更現有資料），則元件會自動使用最新的更新資料重新渲染。
• 如果該特定片段的任何資料遺失，而且目前父查詢正在擷取資料，則元件會暫停。
  • 如需有關暫停的更多詳細資訊，請參閱我們的 使用暫停的載入狀態 指南。
• 請注意，分頁（loadNext 或 loadPrevious）不會導致元件暫停。

與 PaginationContainer 的差異

• 此 API 中不再需要指定分頁查詢，因為 Relay 會透過使用 @refetchable 片段來自動產生查詢。
• 此 API 開箱即用支援同步雙向分頁。
• 此 API 不再需要傳遞 getVariables 或 getFragmentVariables 設定函式，如 PaginationContainer 一樣。
  • 這表示分頁不再具有介於 variables 和 fragmentVariables 之間的關係，這些先前是模糊定義的概念。分頁請求一律會使用最初用於擷取連線的相同變數，除了分頁變數（需要變更才能執行分頁）；在分頁期間變更分頁變數以外的變數沒有意義，因為那表示我們會查詢不同的連線。
• 此 API 不再需要額外的設定，例如 direction 或 getConnectionFromProps 函式（如同 Pagination Container）。這些值將由 Relay 自動決定。
• 重新提取資料不再區分 variables 和 fragmentVariables，這兩個概念先前定義模糊。重新提取資料將始終正確地重新提取並使用您提供的變數渲染片段（輸入中省略的任何變數將回退使用父查詢中的原始值）。
• 重新提取資料將明確地更新元件，這在使用 PaginationContainer 呼叫 refetchConnection 時並不總是如此（這將取決於您在重新提取查詢中查詢的內容，以及您的片段是否定義在正確的物件類型上）。

---

這個頁面有用嗎？

協助我們讓網站變得更好，請 回答幾個簡單的問題.