fetchQuery

fetchQuery

如果您想在 React 之外获取查询，可以使用 react-relay 中的 fetchQuery 函数。

// You should prefer passing an environment that was returned from useRelayEnvironment()
const MyEnvironment = require('MyEnvironment');
const {fetchQuery} = require('react-relay');

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.subscribe({
  start: () => {...},
  complete: () => {...},
  error: (error) => {...},
  next: (data) => {...}
});

参数

• environment: 一个 Relay 环境实例，用于在其上执行请求。如果您在 React 组件内部启动此请求，您可能希望使用从 useRelayEnvironment 获取的环境。
• query: 要获取的 GraphQL 查询，使用 graphql 模板字面量指定。
• variables: 包含用于获取查询的变量值的 Object。这些变量需要与查询内部声明的 GraphQL 变量匹配。
• options: [可选] 选项对象
  • networkCacheConfig: [可选] 包含缓存配置选项的 Object
    • force: 布尔值。如果为 true，将绕过网络响应缓存。默认为 true。

Flow 类型参数

• TQuery: 应与指定查询的 Flow 类型相对应的类型参数。此类型可从自动生成的文件中导入：<query_name>.graphql.js。它将确保可观察对象提供的数据类型与查询的形状匹配，并强制执行作为输入传递给 fetchQuery 的 variables 匹配查询期望的变量类型。

返回值

• observable: 返回一个可观察实例。要启动请求，必须在可观察对象上调用 subscribe 或 toPromise。公开以下方法
  • subscribe: 可用于订阅网络请求可观察对象的函数。请记住，这只会让您订阅查询的获取，而不会订阅 Relay 存储中数据的任何后续更改。
    • 参数
      • observer: 指定网络请求可观察对象上发生的事件的观察器函数的对象。可以在观察器对象中指定以下事件处理程序作为键
        • start: 网络请求开始时将调用的函数。它将接收一个 subscription 参数，该参数表示网络可观察对象上的订阅。
        • complete: 如果并且仅当网络请求成功完成时将调用的函数。
        • next: 每当从网络接收有效负载时将调用的函数。它将接收一个 data 参数，该参数表示从服务器接收到有效负载那一刻从 Relay 存储中读取的查询数据的快照。
        • error: 网络请求期间发生错误时将调用的函数。它将接收一个 error 参数，包含发生的错误。
        • unsubscribe: 每当订阅取消时将调用的函数。它将接收一个 subscription 参数，该参数表示网络可观察对象上的订阅。
    • 返回值
      • subscription: 表示对可观察对象的订阅的对象。调用 subscription.unsubscribe() 将取消网络请求。
  • toPromise:
    • 返回值
      • promise: 返回一个 Promise，该 Promise 在从服务器接收到第一个网络响应时解析。如果请求失败，Promise 将被拒绝。无法取消。

行为

• fetchQuery 将自动将获取的数据保存到内存中的 Relay 存储中，并通知订阅相关数据的任何组件。
• fetchQuery 不会 保留查询的数据，这意味着在请求完成后的任何时间点，都不能保证数据会保留在 Relay 存储中。如果您希望确保数据在请求范围之外保留，您需要在查询上直接调用 environment.retain() 以确保它不会被删除。有关更多详细信息，请参阅我们关于 控制 Relay 的 GC 策略 的部分。
• fetchQuery 将自动对同时正在进行的相同网络请求（相同的查询和变量）进行重复数据删除，这些请求是使用 fetchQuery 启动的。

使用 .toPromise() 的行为

如果需要，您可以使用 **.toPromise()** 将请求转换为 Promise。请注意，toPromise 将启动查询并返回一个 Promise，该 Promise 在数据第一块从服务器返回时解析并取消进一步处理。这意味着查询中的任何延迟数据或 3D 数据可能不会被处理。我们通常建议不要使用 toPromise()，因为有这种原因。

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

fetchQuery(
  environment,
  graphql`
    query AppQuery($id: ID!) {
      user(id: $id) {
        name
      }
    }
  `,
  {id: 4},
)
.toPromise() // NOTE: don't use, this can cause data to be missing!
.then(data => {...})
.catch(error => {...};

• toPromise 返回一个 Promise，该 Promise 在从服务器接收到第一个网络响应时解析。如果请求失败，Promise 将被拒绝。无法取消。

---

此页面有用吗？

通过以下操作帮助我们改进网站： 回答几个简短的问题.