RTK-query error type Property 'status' does not exist on type 'SerializedError'.ts(2339)

3932 ワード
ts(2339) テキストリンク

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変異(上の例ではusePostCNPlusResultMutation)を使用している場合、成功時の「PostCNPlusResultError」の値は定義されておらず、失敗した場合、サーバは次のタイプの結果値を提供します.
 {
  status: number;
  data: { message: string; statusCode: number };
}
エラーが発生した場合、statusプロパティの値を表示する場合は、次のタイプのエラーが発生します.


Property 'status' does not exist on type 'ResponseErrorType | FetchBaseQueryError | SerializedError'.
Property 'status' does not exist on type 'SerializedError'.ts(2339)
次のBaseQueryFnは、変異結果値のタイプを示しています.

/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などと処理する.
条件文がUSECNPlusResultMutationエンドポイントからロードされたエラー・オブジェクト(PostCNPlusResultError)にdata属性があるかどうかをチェックすると、タイプ・スクリプトは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
[spring] part3. Spring入門-03 Web開発の概要
QUARKUSを早速試してみた