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

loadQuery

loadQuery​

此函数旨在与 usePreloadedQuery() 钩子一起使用，以实现“边渲染边获取”。

从 loadQuery 返回的查询引用将在 .dispose() 未被调用时将数据泄漏到 Relay 存储中。因此，尽可能优先使用 useQueryLoader，它确保查询引用会被释放。

请参阅 usePreloadedQuery 文档以获取更完整的示例。

const MyEnvironment = require('MyEnvironment');
const {loadQuery} = require('react-relay');

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

// Note: you should generally not call loadQuery at the top level.
// Instead, it should be called in response to an event (such a route navigation,
// click, etc.).
const queryReference = loadQuery(
  MyEnvironment,
  query,
  {id: '4'},
  {fetchPolicy: 'store-or-network'},
);

// later: pass queryReference to usePreloadedQuery()
// Note that query reference should have .dispose() called on them,
// which is missing in this example.

参数​

  • environment：要执行请求的 Relay 环境实例。如果您在 React 组件中启动此请求，您可能希望使用从使用 useRelayEnvironment 获取的环境。
  • query：要获取的 GraphQL 查询，使用 graphql 模板文字指定，或可预加载的具体请求，可以通过要求文件 <name-of-query>$Parameters.graphql 来获取。只有在查询标注有 @preloadable 时，Relay 才会生成 $Parameters 文件。
  • variables：包含用于获取查询的变量值的 对象。这些变量需要与查询内部声明的 GraphQL 变量匹配。
  • options：[可选] 选项对象
    • fetchPolicy：确定是否使用缓存数据，以及根据当前在 Relay 存储中可用的缓存数据是否发送网络请求（有关详细信息，请参阅我们的 获取策略 和 垃圾回收 指南）。
      • "store-or-network": (默认) 将 重用本地缓存数据，并且 仅 在查询数据缺失时才会发送网络请求。如果查询完全缓存，则 不会 发送网络请求。
      • "store-and-network": 将 重用本地缓存数据，并且 始终 发送网络请求，无论本地缓存中是否存在数据。
      • "network-only": 不会 重用本地缓存数据，并且 始终 发送网络请求以获取查询，忽略 Relay 中可能本地缓存的任何数据。
    • networkCacheConfig：[可选] 默认值：{force: true}。包含 网络层 缓存配置选项的对象。请注意，网络层可能包含一个 额外的 查询响应缓存，它将对相同查询重复使用网络响应。如果您希望完全绕过此缓存（这是默认行为），请将 {force: true} 作为此选项的值传递。
  • environmentProviderOptions：[可选] 选项对象
    • 传递给 prepareSurfaceEntryPoint.js 中使用的 environmentProvider 的选项。

返回值​

具有以下属性的查询引用

  • dispose：一种方法，将释放查询引用，使其不再被存储保留。这会导致查询引用引用的数据被垃圾回收。

返回值的确切格式不稳定，很可能会发生变化。我们强烈建议不要使用返回值的任何其他属性，因为此类代码在升级到 Relay 的未来版本时很可能会出现故障。相反，将 loadQuery() 的结果传递给 usePreloadedQuery()。

行为​

  • loadQuery() 将在传递查询时获取数据，或者在传递可预加载的具体请求时获取数据和查询。一旦查询和数据都可用，查询中的数据将被写入存储。这与 preloadQuery_DEPRECATED 的行为不同，后者仅在查询被传递给 usePreloadedQuery 时才会将数据写入存储。
  • 从 loadQuery 返回的查询引用将被 Relay 存储保留，从而阻止数据被垃圾回收。一旦您在查询引用上调用 .dispose()，它就可以被垃圾回收。
  • 如果在 React 的渲染阶段调用 loadQuery()，它将抛出错误。