1. issue

/pages/index.ts

  const [
  postCNPlusResult,
  {
    isLoading: PostCNPlusResultLoading,
    isError: IsPostCNPlusResultError,
    error: PostCNPlusResultError,
    isSuccess: PostCNPlusResultDone,
  },
] = usePostCNPlusResultMutation();

useEffect(() => {
  console.log('PostCNPlusResultError', PostCNPlusResultError.status);
}, [PostCNPlusResultError]);

rtk-query mutation(위의 예시에서는 usePostCNPlusResultMutation)을 사용하면 성공 시에는 'PostCNPlusResultError' 값이 undefined이고 실패시에는 다음과 같은 타입으로 결과값이 서버에서 옵니다.

 {
  status: number;
  data: { message: string; statusCode: number };
}

이때 에러일 경우 status property에 있는 값을 확인하고 싶다면 다음과 같은 타입에러가 발생합니다.

Property 'status' does not exist on type 'ResponseErrorType | FetchBaseQueryError | SerializedError'.
Property 'status' does not exist on type 'SerializedError'.ts(2339)

다음 BaseQueryFn에서 해당 mutation의 결과값의 타입이 어떤 식으로 설정되어 있는지 볼 수 있습니다.

<string | FetchArgs, unknown, FetchBaseQueryError>

/redux/services/index.ts

const baseQuery = fetchBaseQuery({
baseUrl: baseURL,
credentials: 'include',
prepareHeaders: (headers, { getState }) => {

        ...
        
  return headers;
},
});

const baseQueryWithIntercept: BaseQueryFn<string | FetchArgs, unknown, FetchBaseQueryError> =
async (args, api, extraOptions) => { //이 부분
  
      ...

};

export const rtkApi = createApi({
baseQuery: baseQueryWithIntercept,
reducerPath: 'rtkApi',
endpoints: (build) => ({

  ...
});

export const { ... } = rtkApi;

/redux/services/store.ts

import { PostCNPlusResultRequestProps } from '@typings/store';

import { rtkApi } from './index';

const storeApi = rtkApi.injectEndpoints({
endpoints: (build) => ({
  postCNPlusResult: build.mutation<any, PostCNPlusResultRequestProps>({
    query: (body) => ({
      url: '/Web/CNPlusResult',
      method: 'POST',
      body,
    }),
  }),
}),
overrideExisting: false,
});

export const { usePostCNPlusResultMutation } = storeApi;

2. solution

rtk-query createApi의 baseQuery의 타입은 서버에서 던지는 오류는 FetchBaseQueryError로 처리하고 사용자가 작성한 코드는 serializedError, queryFn, transformResponse 등으로 처리합니다.
아래와 같이 조건문으로 usePostCNPlusResultMutation endpoint에서 불러온 error객체(PostCNPlusResultError)가 'data' property를 가지고 있는지 조건문으로 확인하면 타입스크립트가 자동으로 FetchBaseQueryError로 처리하게 되며 해당 에러를 해결할 수 있습니다.

```
const [
postCNPlusResult,
{
  isLoading: PostCNPlusResultLoading,
  isError: IsPostCNPlusResultError,
  error: PostCNPlusResultError,
  isSuccess: PostCNPlusResultDone,
},

] = usePostCNPlusResultMutation();

useEffect(() => {
if ((!!PostCNPlusResultError && 'data' in PostCNPlusResultError) {
// TypeScript will handle it as FetchBaseQueryError from now on.

  console.log('PostCNPlusResultError', PostCNPlusResultError?.status);
}

}, [PostCNPlusResultError]);

  
  참고:
  https://stackoverflow.com/questions/70017789/react-redux-how-to-handle-errors-in-rtk-queries-mutation-typescript