Redux RTK Query- TypeScript error.

[octopus-travels]

When I try to check the error of the RTK query response, it gives the following TypeScript error.

Property 'error' does not exist on type 'FetchBaseQueryError | SerializedError'.
Property 'error' does not exist on type '{ status: number; data: unknown; }'.ts(2339)

Error occurs when accessing the "error" value of "error" object (error.error), however the console log works when threre's a network error.

const { data, error, isLoading } = useGetAllProductsQuery('products')
if (error) {
if (error.error === 'TypeError: Network request failed') {
console.log('Network error')
...

[phryneas]

https://redux-toolkit.js.org/rtk-query/usage-with-typescript#type-safe-error-handling

[octopus-travels]

Thanks a lot..

[karanshah229]

@phryneas I would like the data property of the error returned by FetchBaseQueryError.
It is unknown by default.

We a fixed error structure from BE that I want to use across the FE app for error handling.

{
  statusCode: number;
  message: string | string[];
  error: string;
};

How can I achieve this ?

[nivans-pro]

@phryneas don't you tired to answer same answers to people who is struggling to handle API errors with RTK query? maybe it's time to provide a way to type API errors for developers in their own style? I understand that it's not easy to do backward-compatible, but maybe future major versions could have that?

[markerikson]

@nivans-pro if you have specific suggestions we're open to ideas, but please also give us the credit to believe that we've tried to implement the best approach we can think of.

[phryneas]

This is open source, you're welcome to use a few weeks of your time to come up with a good solution that works well with TS, and has good DX, while not breaking existing applications and also not hiding unexpected errors.