React应用中SWR Mutation报错‘Can’t trigger the mutation: missing key’求助

错误原因 #

useSWRMutation要求必须提供一个非空的mutation key作为第一个参数，这个key是SWR用来追踪mutation状态、区分不同mutation实例的唯一标识。你的代码中传入了null作为初始key，导致SWR无法识别对应的mutation，触发时抛出missing key错误。

修复方案 #

方案1：使用固定mutation key #

修改useCustomSWRMutation，将初始key替换为一个固定字符串：

import useSWRMutation from "swr/mutation";

const sendRequest = async (url, { arg, method, headers }) => {
  const options = {
    method: method || "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify(arg),
  };

  const response = await fetch(url, options);
  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || "Something went wrong");
  }

  return await response.json();
};

const useCustomSWRMutation = () => {
  // 将null替换为固定的mutation key
  const { trigger, data, error, isMutating } = useSWRMutation(
    'generic-mutation',
    sendRequest
  );

  return { triggerMutation: trigger, data, error, isMutating };
};

export default useCustomSWRMutation;

方案2：支持自定义mutation key（推荐） #

如果应用中有多个不同的mutation操作，可以让useCustomSWRMutation接收自定义key，方便区分不同的mutation状态：

import useSWRMutation from "swr/mutation";

const sendRequest = async (url, { arg, method, headers }) => {
  const options = {
    method: method || "POST",
    headers: {
      "Content-Type": "application/json",
      ...headers,
    },
    body: JSON.stringify(arg),
  };

  const response = await fetch(url, options);
  if (!response.ok) {
    const errorData = await response.json();
    throw new Error(errorData.message || "Something went wrong");
  }

  return await response.json();
};

// 接收可选的自定义key参数，默认值为'generic-mutation'
const useCustomSWRMutation = (key = 'generic-mutation') => {
  const { trigger, data, error, isMutating } = useSWRMutation(
    key,
    sendRequest
  );

  return { triggerMutation: trigger, data, error, isMutating };
};

export default useCustomSWRMutation;

使用时可指定专属key：

// 针对场地操作的mutation使用专属key
const { triggerMutation, data, error, isMutating } = useCustomSWRMutation('venue-mutation');

额外说明 #

你的sendRequest函数参数处理是正确的：调用triggerMutation(url, { arg: venue, method, headers })时，url会作为mutation key传递给sendRequest的第一个参数，后续可正常用于请求地址。

内容的提问来源于stack exchange，提问作者user7262799