跳至主要內容
版本：v18.0.0

useLazyLoadQuery

useLazyLoadQuery​

在渲染期間用於提取 GraphQL 查詢的 Hook。如果不謹慎使用此 Hook，可能會觸發多個巢狀或瀑布式的往返，並且會等到渲染時才開始數據提取（通常可以在渲染之前開始很多），從而降低效能。建議改用 usePreloadedQuery。

const React = require('React');

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

function App() {
  const data = useLazyLoadQuery(
    graphql`
      query AppQuery($id: ID!) {
        user(id: $id) {
          name
        }
      }
    `,
    {id: 4},
    {fetchPolicy: 'store-or-network'},
  );

 return <h1>{data.user?.name}</h1>;
}

引數​

  • query：使用 graphql 樣板字面值指定的 GraphQL 查詢。
  • variables：包含要提取查詢的變數值的物件。這些變數需要與查詢中宣告的 GraphQL 變數相符。
  • options：[選用] 選項物件
    • fetchPolicy：決定是否應使用快取的數據，以及何時根據 Relay 儲存區中目前可用的快取數據發送網路請求（如需更多詳細資訊，請參閱我們的提取策略和垃圾收集指南）
      • 「store-or-network」：（預設）會重複使用本機快取的數據，並且只有在查詢的任何數據遺失時才會發送網路請求。如果查詢已完全快取，則不會發送網路請求。
      • 「store-and-network」：會重複使用本機快取的數據，並且無論本機快取中是否遺失任何數據，都會始終發送網路請求。
      • 「network-only」：不會重複使用本機快取的數據，並且始終會發送網路請求以提取查詢，忽略 Relay 中可能在本機快取的任何數據。
      • 「store-only」：僅會重複使用本機快取的數據，並且絕不會發送網路請求以提取查詢。在這種情況下，提取查詢的責任落在呼叫者身上，但此策略也可以用來讀取和操作完全本機的數據。
    • fetchKey：可以傳遞 fetchKey，以在元件重新渲染時強制重新評估目前的查詢和變數，即使變數沒有變更，甚至元件沒有重新掛載也是如此（類似於將不同的 key 傳遞給 React 元件會使其重新掛載的方式）。如果 fetchKey 與先前渲染中使用的不同，則會根據儲存區重新評估目前的查詢，並且可能會根據目前的 fetchPolicy 和快取狀態重新提取。
    • networkCacheConfig：[選用] 預設值：{force: true}。包含網路層快取組態選項的物件。請注意，網路層可能包含一個額外的查詢回應快取，該快取會重複使用相同查詢的網路回應。如果您想要完全繞過此快取（這是預設行為），請將 {force: true} 作為此選項的值傳遞。

傳回值​

  • data：包含已從 Relay 儲存區讀取的數據的物件；該物件符合指定查詢的形狀。
    • 數據的 Flow 類型也會符合此形狀，並包含從 GraphQL 結構描述衍生的類型。例如，上述 data 的類型為：{| user: ?{| name: ?string |} |}。

行為​

  • 預期 useLazyLoadQuery 已在RelayEnvironmentProvider下渲染，以便存取正確的 Relay 環境，否則會擲回錯誤。
  • 呼叫 useLazyLoadQuery 會提取並渲染此查詢的數據，並且可能會在網路請求正在進行時暫停，具體取決於指定的 fetchPolicy，以及快取的數據是否可用，或者是否需要發送並等待網路請求。如果 useLazyLoadQuery 導致元件暫停，則需要確保有一個 Suspense 上層包裝此元件，以便顯示適當的載入狀態。
  • 元件會自動訂閱查詢數據的更新：如果此查詢的數據在應用程式中的任何位置更新，則元件會自動使用最新的更新數據重新渲染。
  • 在使用 useLazyLoadQuery 的元件提交後，重新渲染/更新元件不會導致再次提取查詢。
    • 如果使用不同的查詢變數重新渲染元件，則會導致使用新變數再次提取查詢，並可能使用不同的數據重新渲染。
    • 如果元件卸載並重新掛載，則會導致重新提取目前的查詢和變數（取決於 fetchPolicy 和快取的狀態）。

與 QueryRenderer 的差異​

  • useLazyLoadQuery 不再將 Relay 環境作為參數，因此不再像 QueryRenderer 一樣在 React Context 中設定環境。相反地，應將 useLazyLoadQuery 用作RelayEnvironmentProvider的後代，現在該 RelayEnvironmentProvider 在 Context 中設定 Relay 環境。通常，您應該在應用程式的最根部渲染單個 RelayEnvironmentProvider，以為整個應用程式設定單個 Relay 環境。
  • useLazyLoadQuery 將使用Suspense，讓開發人員可以使用 Suspense 邊界渲染載入狀態，並且如果發生網路錯誤，將擲回錯誤，可以使用錯誤邊界捕獲並渲染這些錯誤。這與將錯誤物件或 null props 提供給 QueryRenderer 渲染函式以指示錯誤或載入狀態相反。
  • useLazyLoadQuery 完全支援提取策略，以便重複使用快取在 Relay 儲存區中的數據，而不是僅依賴於網路回應快取。
  • useLazyLoadQuery 對其傳回的數據具有更好的類型安全保證，這對於 QueryRenderer 來說是不可能的，因為我們無法使用渲染器 api 來參數化數據的類型。
此頁面是否實用？

協助我們透過以下方式讓網站更臻完善 回答幾個快速問題.