useMutation

useMutation

用於在 React 元件中執行 mutation 的 Hook。

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 mutation。

• commitMutationFn：<T: MutationParameters>(IEnvironment, MutationConfig<T>): Disposable。[選填] 與 commitMutation 具有相同簽名的函式，將會取代 commitMutation 呼叫。預設為 commitMutation。

回傳值

包含以下值的元組

• [0] commitMutation：將執行 mutation 的函式
  • 引數，語法簽名與我們的 commitMutation API 幾乎相同
    • variables：包含 mutation 所需變數的物件。例如，如果 mutation 定義了 $input 變數，則此物件應包含 input 鍵，其形狀必須符合 GraphQL schema 定義的 mutation 所期望的資料形狀。
    • onCompleted：在請求完成且記憶體中的 Relay 儲存區透過 updater 函式更新時執行的回呼函式。接受一個 response 物件，該物件是「原始」伺服器回應。內部不允許 errors，CRITICAL 錯誤將會在 onError 處理常式中擲出。
    • onError：如果 Relay 在請求期間遇到錯誤時執行的回呼函式。在內部，在伺服器上讀取 mutation 結果期間發生 CRITICAL 錯誤
    • optimisticResponse：包含樂觀更新本地記憶體儲存區的資料的物件，也就是說，在 mutation 請求完成之前立即更新。此物件必須具有與 GraphQL schema 定義的 mutation 回應類型相同的形狀。如果提供，Relay 將會使用 optimisticResponse 資料來更新本地資料儲存區中相關記錄的欄位，在 執行 optimisticUpdater 之前。如果在 mutation 請求期間發生錯誤，樂觀更新將會回滾。
    • optimisticUpdater：用於樂觀更新本地記憶體儲存區的函式，也就是說，在 mutation 請求完成之前立即更新。如果在 mutation 請求期間發生錯誤，樂觀更新將會回滾。此函式接受一個 store，該 store 是記憶體中 Relay 儲存區 的 Proxy。在此函式中，用戶端定義如何透過 store 實例更新本機資料。如需關於如何使用 store 的詳細資訊，請參閱我們的 Relay 儲存區 API 參考。請注意
      • 通常最好只傳遞 optimisticResponse 選項，而不是 optimisticUpdater，除非您需要在本機記錄上執行比僅更新欄位更複雜的更新（例如，刪除記錄或將項目新增至集合）。
      • 如果您決定使用 optimisticUpdater，通常它可以與 updater 相同。
    • updater：用於根據 mutation 的實際伺服器回應更新本地記憶體儲存區的函式。如果未提供 updater，則預設情況下，Relay 將會知道自動更新 mutation 回應中引用的記錄的欄位；但是，如果您需要進行比僅更新欄位更複雜的更新（例如，刪除記錄或將項目新增至集合），則應該傳遞 updater。當伺服器回應返回時，Relay 會先還原 optimisticUpdater 或 optimisticResponse 引入的任何變更，然後執行 updater。此函式接受一個 store，該 store 是記憶體中 Relay 儲存區 的 Proxy。在此函式中，用戶端定義如何透過 store 實例根據伺服器回應更新本地資料。如需關於如何使用 store 的詳細資訊，請參閱我們的 Relay 儲存區 API
    • uploadables：一個可選的可上傳地圖，一個物件，表示任意數量的可上傳項目，每個項目一個鍵。每個值都必須是 File 或 Blob 類型。
    • 沒有環境引數：useMutation 將會自動使用 RelayEnvironmentProvider 提供的目前環境
  • 回傳值
    • disposable：包含 dispose 函式的物件。呼叫 disposable.dispose() 將會還原樂觀更新，並且 Relay 不會更新儲存區或呼叫任何成功/錯誤回呼，但無法保證網路請求會被取消。如果在 mutation 成功之後呼叫 dispose，則它不會在 Relay 儲存區中回滾更新。
• [1] areMutationsInFlight：如果呼叫 commitMutation 所觸發的任何 mutation 仍在進行中，則將為 true。如果您多次呼叫 commitMutation，則一次可以有多個 mutation 在進行中。

---

這個頁面有用嗎？

請協助我們透過以下方式讓網站更好 回答幾個簡單的問題.