バージョン: v18.0.0

useMutation

`useMutation`

Reactコンポーネントでミューテーションを実行するために使用するフック。

import type {FeedbackLikeMutation} from 'FeedbackLikeMutation.graphql';
const React = require('React');

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

function LikeButton() {
  const [commit, isInFlight] = useMutation<FeedbackLikeMutation>(graphql`
    mutation FeedbackLikeMutation($input: FeedbackLikeData!) {
      feedback_like(data: $input) {
        feedback {
          id
          viewer_does_like
          like_count
        }
      }
    }
  `);

  if (isInFlight) {
    return <Spinner />;
  }

  return (
    <button
      onClick={() => {
        commit({
          variables: {
            input: {
              id: '123',
              text: 'text',
            },
          },
          onCompleted(data) {
            console.log(data);
          },
        });
      }}
    />
  );
}

引数

mutation: graphqlテンプレートリテラルを使用して指定されたGraphQLミューテーション。

commitMutationFn: <T: MutationParameters>(IEnvironment, MutationConfig<T>): Disposable。* [オプション] * commitMutation と同じシグネチャを持つ関数で、代わりに呼び出されます。デフォルトはcommitMutationです。

戻り値

以下の値を含むタプル

[0] commitMutation: ミューテーションを実行する関数
- 引数、構文シグネチャはcommitMutation API とほぼ同じです。
  - variables: ミューテーションに必要な変数を格納するオブジェクト。たとえば、ミューテーションが$input変数を定義する場合、このオブジェクトにはinputキーが含まれており、その形状はGraphQLスキーマで定義されているミューテーションで期待されるデータの形状と一致する必要があります。
  - onCompleted: リクエストが完了し、updater関数を使用してインメモリRelayストアが更新されたときに実行されるコールバック関数。responseオブジェクト（生のサーバーレスポンス）を受け取ります。内部的にはエラーは許可されず、onErrorハンドラーでCRITICALエラーがスローされます。
  - onError: Relayがリクエスト中にエラーを検出した場合に実行されるコールバック関数。内部的には、サーバー上のミューテーション結果の読み取り中にCRITICALエラーが発生します。
  - optimisticResponse: ローカルインメモリストアを楽観的に更新するためのデータ（つまり、ミューテーションリクエストが完了する前にすぐに）を含むオブジェクト。このオブジェクトは、GraphQLスキーマで定義されているミューテーションのレスポンスタイプと同じ形状である必要があります。指定されている場合、RelayはoptimisticResponseデータを使用して、optimisticUpdaterが実行される*前*に、ローカルデータストア内の関連レコードのフィールドを更新します。ミューテーションリクエスト中にエラーが発生した場合、楽観的な更新はロールバックされます。
  - optimisticUpdater: ローカルインメモリストアを楽観的に更新するために使用する関数（つまり、ミューテーションリクエストが完了する前にすぐに）。ミューテーションリクエスト中にエラーが発生した場合、楽観的な更新はロールバックされます。この関数は、インメモリのRelayストアのプロキシであるstoreを受け取ります。この関数で、クライアントはstoreインスタンスを介してローカルデータを更新する方法を定義します。storeの使用方法の詳細については、RelayストアAPIリファレンスを参照してください。ご注意ください
    - フィールドの更新よりも複雑な更新（レコードの削除やコレクションへのアイテムの追加など）を行う必要がない限り、optimisticUpdaterではなくoptimisticResponseオプションを渡す方が通常は好ましいです。
    - optimisticUpdaterを使用することにした場合、多くの場合、updaterと同じ関数にすることができます。
  - updater: ミューテーションからの実際のサーバーレスポンスに基づいてローカルインメモリストアを更新するために使用する関数。updaterが提供されていない場合、デフォルトでRelayはミューテーションレスポンスで参照されているレコードのフィールドを自動的に更新することを認識しますが、フィールドの更新よりも複雑な更新（レコードの削除やコレクションへのアイテムの追加など）を行う必要がある場合は、updaterを渡す必要があります。サーバーレスポンスが返されると、RelayはまずoptimisticUpdaterまたはoptimisticResponseによって導入された変更を元に戻し、その後updaterを実行します。この関数は、インメモリのRelayストアのプロキシであるstoreを受け取ります。この関数で、クライアントはstoreインスタンスを介してサーバーレスポンスに基づいてローカルデータを更新する方法を定義します。RelayストアAPIを参照してください。
  - uploadables: オプションのアップロード可能なマップ。アップロード可能なアイテムの数（アイテムごとに1つのキー）を表すオブジェクト。各値はFileまたはBlob型である必要があります。
  - 環境引数なし: useMutationは、RelayEnvironmentProviderによって提供される現在の環境を自動的に使用します。
- 戻り値
  - disposable: dispose関数を格納するオブジェクト。disposable.dispose()を呼び出すと、楽観的な更新が元に戻され、Relayはストアを更新したり、成功/エラーコールバックを呼び出したりしなくなりますが、ネットワークリクエストがキャンセルされる保証はありません。ミューテーションが成功した後にdisposeが呼び出された場合、Relayストア内の更新はロールバックされません。
[1] areMutationsInFlight: commitMutationを呼び出すことによってトリガーされたミューテーションがまだ実行中の場合、trueになります。commitMutationを複数回呼び出すと、一度に複数のミューテーションが実行中になる可能性があります。

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

簡単な質問にお答えいただき、サイトをさらに改善するお手伝いをお願いします。いくつかの簡単な質問にお答えください.

useMutation​

引数​

戻り値​

`useMutation`

引数

戻り値