バージョン: v18.0.0

ローカルデータの更新

Relayは、Relayストアに対して純粋なローカル更新（つまり、サーバー操作に結びついていない更新）を行うためのAPIをいくつか提供しています。

ローカルデータ更新は、クライアント専用データでも、操作を通じてサーバーから取得された通常のデータでも行えることに注意してください。

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は、RecordSourceSelectorProxyのインスタンスであるstore引数を取ります。このインターフェースを使用すると、Relayストアに対してデータを直接*命令的*に読み書きできます。つまり、ストアをどのように更新するかを完全に制御できます。完全に新しいレコードを作成することも、既存のレコードを更新または削除することもできます。
- mutationおよびsubscription APIで受け入れられる通常のアップデーターおよび楽観的アップデーターとは異なり、commitLocalUpdateに渡されるアップデーターは2番目のパラメーターを受け入れません。これは、関連付けられたネットワーク応答がないためです。
ローカルデータ更新は、データにサブスクライブしているコンポーネントに自動的に変更が通知され、再レンダリングされることに注意してください。

commitPayload

commitPayloadは、OperationDescriptorとクエリのペイロードを受け取り、それをRelayストアに書き込みます。ペイロードは、クエリに対する通常のサーバー応答のように解決され、JSResource、requireDeferなどとして渡されるデータドリブンな依存関係も解決されます。

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型を使用して型付けできます。
ローカルデータ更新は、データにサブスクライブしているコンポーネントに自動的に変更が通知され、再レンダリングされることに注意してください。

このページは役に立ちましたか？

いくつかの簡単な質問に答えて、サイトをさらに改善するためにご協力くださいいくつかの簡単な質問に答えてください.

commitLocalUpdate​

commitPayload​

commitLocalUpdate

commitPayload