如何解构来自 RTK 查询变异挂钩的错误？

Question

我正在使用 redux 工具包查询来获取数据 API。问题是我遇到的是错误处理 redux 工具包从查询挂钩返回错误属性。因此，从服务器返回的错误是一个带有嵌套数据的对象，并且尝试访问它时，当尝试从错误对象访问数据时，我收到打字稿错误。

下面是我如何声明我的突变钩子

const [updateProgram, {
  isLoading: isUpdatingProgram,
  error: updateProgramError
}] = useUpdateProgramMutation();

下面是我尝试访问代码中的错误的方法。

onSubmit = {
  async(values, {
    setSubmitting
  }) => {
    await updateProgram({ ...values,
      id: 'programData.data._id'
    });
    refetch();

    if (updateProgramError) {
      enqueueSnackbar('Test message', {
        variant: 'error'
      });
      console.log(updateProgramError?.data?.message);
    }
    setSubmitting(false);
  }
}

现在我收到的打字稿错误如下。并不是说我能够 console.log(updateProgramError) 并且是控制台中的数据

Property 'data' does not exist on type 'FetchBaseQueryError | SerializedError'.
  Property 'data' does not exist on type 'SerializedError'.

下面是我在控制台上登录时的 updateProgramError 整体

{
  "status": 500,
  "data": {
    "status": "error",
    "message": "Something went very wrong!"
  }
}

下面是我如何实现 useUpdateProgramMutation()。

import { ndovuAPI } from './ndovuAPI';

export const ndovuProgramsAPI = ndovuAPI.injectEndpoints({
  endpoints: builder => ({
    getProgramById: builder.query({
      query: (id: string) => `/programs/${id}`,
      providesTags: ['Programs']
    }),
    getAllPrograms: builder.query({
      query: queryParams => ({ url: `/programs/`, params: queryParams }),
      providesTags: ['Programs']
    }),
    registerProgram: builder.mutation({
      query: body => ({
        url: '/programs',
        method: 'POST',
        body
      }),
      invalidatesTags: ['Programs']
    }),
    updateProgram: builder.mutation({
      query: body => ({ url: `/programs/${body.id}`, method: 'PATCH', body }),
      invalidatesTags: ['Programs']
    })
  }),
  overrideExisting: true
});

// Export hooks for usage in functional components
export const { useGetProgramByIdQuery, useGetAllProgramsQuery, useUpdateProgramMutation } = ndovuProgramsAPI;

Answer 1

您编写的代码将不会按照您想要的方式工作。您无法像这样从 onSubmit 处理程序内部的钩子引用错误。你想要做的是这样的：

const onSubmit = async (values) => {
    try {
         // unwrapping will cause data to resolve, or an error to be thrown, and will narrow the types
        await updateProgram({ 
            ...values,
            id: 'programData.data._id'
        }).unwrap();
    // refetch(); // you should most likely just use tag invalidation here instead of calling refetch
    } catch (error) {
        // error is going to be `unknown` so you'll want to use a typeguard like:
        if (isMyKnownError(error)) { // add a typeguard like this
            enqueueSnackbar('Test message', {
                variant: 'error'
            });
        } else { 
        // You have some other error, handle it differently?
        }
    }
  }

参考：

• https://redux-toolkit.js.org/rtk-query/usage/mutations#frequently-used-mutation-hook-return-values