useQueryLoader

useQueryLoader

用于轻松安全地加载和保留查询的钩子。它将保留存储在状态中的查询引用，并在组件被销毁或不再可以通过状态访问时将其销毁。

此钩子旨在与 usePreloadedQuery 一起使用，以实现“边渲染边获取”模式。有关更多信息，请参阅 为渲染获取查询 指南。

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: [可选] 一个初始 PreloadedQuery，将用作存储在状态中并由 useQueryLoader 返回的 queryReference 的初始值。

返回值

包含以下值的元组

• 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()，数据就有可能被垃圾回收。
• loadQuery 回调不应该在 React 的渲染阶段调用。

---

此页面是否有用？

通过以下方式帮助我们使网站更好 回答几个简短的问题.