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

本地数据更新

Relay 提供了一些 API,用于对 Relay 存储进行纯粹的本地更新(即与服务器操作无关的更新)。

请注意,本地数据更新可以在 仅客户端数据 上进行,也可以在通过操作从服务器获取的常规数据上进行。

commitLocalUpdate

若要使用 updater 函数进行更新,可以使用 commitLocalUpdate API

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

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

function commitCommentCreateLocally(
environment: Environment,
feedbackID: string,
) {
return commitLocalUpdate(environment, store => {
// Imperatively mutate the store here
});
}

module.exports = {commit: commitCommentCreateLocally};
  • commitLocalUpdate 更新只需接收一个环境和一个更新器函数。
    • updater 接收一个 store 参数,该参数是 RecordSourceSelectorProxy 的实例;此接口允许您以命令式方式直接写入和读取 Relay 存储中的数据。这意味着您可以完全控制如何更新存储:您可以创建全新的记录,或者更新或删除现有记录
    • 与变异和订阅 API 接受的常规和乐观更新器不同,传递给 commitLocalUpdate 的更新器不接受第二个参数。这是因为没有关联的网络响应。
  • 请注意,任何本地数据更新都会自动导致订阅该数据的组件收到更改通知并重新渲染。

commitPayload

commitPayload 接收一个 OperationDescriptor 和查询的有效负载,并将其写入 Relay 存储。该有效负载将像查询的正常服务器响应一样解析,并将解析作为 JSResourcerequireDefer 等传递的 Data Driven Dependencies。

import type {FooQueryRawResponse} from 'FooQuery.graphql'

const {createOperationDescriptor} = require('relay-runtime');

const operationDescriptor = createOperationDescriptor(FooQuery, {
id: 'an-id',
otherVariable: 'value',
});

const payload: FooQueryRawResponse = {...};

environment.commitPayload(operationDescriptor, payload);
  • OperationDescriptor 可以通过 createOperationDescriptor 创建;它接收查询和查询变量。
  • 可以使用在查询中添加指令 @raw_response_type 生成的 Flow 类型对有效负载进行类型化。
  • 请注意,任何本地数据更新都会自动导致订阅该数据的组件收到更改通知并重新渲染。

此页面是否有用?

通过以下方式帮助我们改进网站 回答一些简短的问题.