从 API Slice redux 工具响应中访问错误对象

Question

我有这片

 ...
    baseQuery: fetchBaseQuery({
        baseUrl: BASE_ENDPOINT,
        prepareHeaders: headers => {
            const token = Cookies.get(TOKEN_COOKIE)
            if (token) headers.set('authorization', `Bearer ${token}`);
            return headers;
        },
    }),
    getUserData: builder.query<SomeProps, void>({
        query: () => ({
            url: "...",
            headers: {
                'Content-Type': 'application/json',
            }
        }),
...

在这一点上

const {
    data,
    isLoading,
    error
} = useGetUserInfoQuery()

error

变为 true 并且包含这个

{"status":500,"data":{"status":"FAILED","message":"Some message I want to display."}}

然而，TypeScript 编译器对此有所抱怨

error.data.message

它说

类型 FetchBaseQueryError 上不存在属性数据序列化错误 类型 SerializedError 中不存在属性数据

我连这个都做不到

错误！！.数据！！.消息！！

如何在

data.message

中访问

error

？

Answer 1

error

类型是

unknown

，因此如果您想访问特定属性，则需要将其转换为适当的类型。

参见 useQuery 钩子声明：

type UseQuery = (
  arg: any | SkipToken,
  options?: UseQueryOptions,
) => UseQueryResult

type UseQueryResult<T> = {
  // Base query state
  originalArgs?: unknown // Arguments passed to the query
  data?: T // The latest returned result regardless of hook arg, if present
  currentData?: T // The latest returned result for the current hook arg, if present
  error?: unknown // Error result if present
  requestId?: string // A string generated by RTK Query
  endpointName?: string // The name of the given endpoint for the query
  startedTimeStamp?: number // Timestamp for when the query was initiated
  fulfilledTimeStamp?: number // Timestamp for when the query was completed

  // Derived request status booleans
  isUninitialized: boolean // Query has not started yet.
  isLoading: boolean // Query is currently loading for the first time. No data yet.
  isFetching: boolean // Query is currently fetching, but might have data from an earlier request.
  isSuccess: boolean // Query has data from a successful load.
  isError: boolean // Query is currently in an "error" state.

  refetch: () => QueryActionCreatorResult // A function to force refetch the query - returns a Promise with additional methods
}

使用示例：

interface MyError {
  status: number;
  data: {
    status: string;
    message: string;
  };
}

const {
  data,
  isLoading,
  error
} = useGetUserInfoQuery();

...

(error as MyError).data.message;