Typescript Union and Type Guard

Question

What's the best way to git rid of SerializedError from error using RTK Query, like in the example here: https://redux-toolkit.js.org/rtk-query/usage/error-handling. Also is there an example out there typing the error for individual queries? Thanks in advance

function PostsList() {
  const { data, error } = useGetPostsQuery()
  // error: FetchBaseQueryError | SerializedError | undefined
  // Property 'status' does not exist on type 'FetchBaseQueryError | SerializedError'.
  // How do I check if it's a FetchBaseQueryError before continuing
  return (
    <div>
      {error.status} {JSON.stringify(error.data)}
    </div>
  )
}

score 2 · Accepted Answer · answered Aug 25 '21 at 15:32

The easiest way would be "status" in error:

{ "status" in error ? <>{error.status} {JSON.stringify(error.data)} </> : undefined }

Typing the error for individual queries is not supported. That might change in the future though.

But generally, there are a lot of baseQuery-related errors that would usually occur independently of the endpoint response, for fetchBaseQuery for example parsing errors or connection errors.

https://github.com/reduxjs/redux-toolkit/blob/8a5d4bc69beca497625da48954fc1f2621bb0c82/packages/toolkit/src/query/fetchBaseQuery.ts#L61-L99

Typescript Union and Type Guard

1 Answers1