useQueryLoader

useQueryLoader

此 Hook 用於簡化安全載入和保留查詢的操作。它會將查詢參考儲存在狀態中，並在元件卸載或不再可透過狀態存取時將其釋放。

此 Hook 旨在與 usePreloadedQuery 一起使用，以實作「render-as-you-fetch」模式。如需更多資訊，請參閱「為渲染取得查詢」指南。

import type {PreloadedQuery} from 'react-relay';

const {useQueryLoader, usePreloadedQuery} = require('react-relay');

const AppQuery = graphql`
  query AppQuery($id: ID!) {
    user(id: $id) {
      name
    }
  }
`;

function QueryFetcherExample() {
  const [
    queryReference,
    loadQuery,
    disposeQuery,
  ] = useQueryLoader(
    AppQuery,
  );

  if (queryReference == null) {
    return (
      <Button onClick={() => loadQuery({})}> Click to reveal the name </Button>
    );
  }

  return (
    <>
      <Button onClick={disposeQuery}>
        Click to hide the name and dispose the query.
      </Button>
      <React.Suspense fallback="Loading">
        <NameDisplay queryReference={queryReference} />
      </React.Suspense>
    </>
  );
}

function NameDisplay({ queryReference }) {
  const data = usePreloadedQuery(AppQuery, queryReference);

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

引數

• query：使用 graphql 範本字串指定的 GraphQL 查詢。
• initialQueryRef：[可選] 要用作儲存在狀態中並由 useQueryLoader 傳回的 queryReference 初始值的初始 PreloadedQuery。

傳回值

包含以下值的元組

• queryReference：查詢參考，或 null。
• loadQuery：一個回呼函式，執行時會載入查詢，並可作為 queryReference 存取。如果已載入先前的查詢，則會將其釋放。不應在 React 的渲染階段呼叫。
  • 參數
    • variables：載入查詢時使用的變數。
    • options：LoadQueryOptions。一個可選的選項物件，包含以下鍵
      • fetchPolicy：[可選] 決定是否應使用快取資料，以及何時根據 Relay 儲存中目前可用的快取資料傳送網路請求 (如需更多詳細資訊，請參閱我們的「提取策略」和「垃圾收集」指南)
        • 「store-or-network」：(預設) 會重複使用本機快取資料，且只有在查詢的任何資料遺失時才會傳送網路請求。如果查詢已完整快取，則不會發出網路請求。
        • 「store-and-network」：會重複使用本機快取資料，且一律傳送網路請求，無論本機快取中是否有任何資料遺失。
        • 「network-only」：不會重複使用本機快取資料，且一律傳送網路請求以取得查詢，並忽略 Relay 中可能在本機快取的任何資料。
      • networkCacheConfig：[可選] 預設值：{force: true}。包含網路層快取組態選項的物件。請注意，網路層可能包含額外的查詢回應快取，其會針對相同的查詢重複使用網路回應。如果您想要完全略過此快取 (這是預設行為)，請將 {force: true} 作為此選項的值傳遞。
• disposeQuery：一個回呼函式，執行時會將 queryReference 設定為 null 並對其呼叫 .dispose()。其類型為 () => void。不應在 React 的渲染階段呼叫。

行為

• 如果傳遞查詢，loadQuery 回呼將會提取資料；如果傳遞可預先載入的具體請求，則會提取資料和查詢。一旦查詢和資料都可用，查詢中的資料會寫入儲存區。這與 preloadQuery_DEPRECATED 的行為不同，後者只會在查詢傳遞至 usePreloadedQuery 時才會將資料寫入儲存區。
• 此查詢參考將會由 Relay 儲存區保留，防止資料被垃圾收集。一旦在查詢參考上呼叫 .dispose()，資料就會被垃圾收集。
• 不應在 React 的渲染階段呼叫 loadQuery 回呼。

---

這個頁面有用嗎？

協助我們透過以下方式讓網站變得更好 回答一些簡單的問題.