如何破坏突变反应查询中的错误？

Question

我想从我

const getMutationService = () => {
  return {
    editProfile: async (
      displayName: string,
      privateProfile?: boolean,
    ): Promise<AuthEditMeResponse | undefined> => {
      try {
        const result = await userApi.mePost({
          payload: {
            display_name: displayName,
            _private: privateProfile,
          },
        });
        return result;
      } catch (error) {
        console.log("User Edit Profile Error", error);
      }
    },
  };
};

const useUserProfile = () => {
  const queryClient = useQueryClient();
  const queryService = getQueryService();
  // const { data, isLoading } = useQuery('auth', queryService.login)
  const mutationService = getMutationService();

  const editProfileData = async (
    displayName: string,
    privateProfile?: boolean,
  ): Promise<AuthEditMeResponse | void> => {
    try {
      return await mutationService.editProfile(displayName, privateProfile);
    } catch (error) {
      console.log(error);
    }
  };

  return editProfileData;
};

export default useUserProfile;

现在在这里创建的React-Query突变服务挂钩返回错误，我只是返回结果，这是成功的结果，但是我要求的API端点也要求返回我必须需要的错误状态代码用于我的前端组件。

我如何从我创建的此GetMutationservice Hook中返回isloading，数据或错误？相反，目前，它仅返回对我的组件的成功响应。

Answer 1

您可以在捕获块中丢弃错误，例如：

try { //... }
catch(e) {
  throw Error(e);
}

当您在组件中调用功能时，捕获块内部可以执行类似的操作：

try { //... }
catch(e) {
  setError(e.message);
}

显示错误消息。

Answer 2

问题在于您正在捕获突变函数内部的错误。当您遇到错误时，例如用于记录，它将被转换为a 解决的承诺。这与React-Query无关，这就是承诺（分别尝试/捕捉异步）的工作方式。

React-Query希望您返回A 拒绝的承诺，以便它可以陷入错误状态。为此，您可以：

• 不是 在突变中捕获错误 - 只要让它们起泡到反应引物即可。这是推荐的方法。如果要记录错误，请使用提供的OnError回调。
• 捕获错误后重新出现错误。