跳至主要內容
版本: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 儲存區的資料。這意味著您可以完全控制如何更新儲存區:您可以建立全新的記錄,或者更新或刪除現有的記錄
    • 與 mutation 和 subscription API 接受的常規和樂觀更新器不同,傳遞給 commitLocalUpdate 的更新器不接受第二個參數。這是因為沒有相關的網路回應。
  • 請注意,任何本地資料更新都會自動導致訂閱該資料的元件收到變更通知並重新渲染。

commitPayload

commitPayload 接受一個 OperationDescriptor 和查詢的 payload,並將其寫入 Relay 儲存區。payload 將像查詢的正常伺服器回應一樣被解析,並且也會解析作為 JSResourcerequireDefer 等傳遞的資料驅動的依賴項。

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 類型來鍵入 payload。
  • 請注意,任何本地資料更新都會自動導致訂閱該資料的元件收到變更通知並重新渲染。

此頁面是否有用?

請協助我們透過 回答幾個快速問題,讓網站更臻完善.