foreign-sapphire

error Type

So I am converting v4 to v5 and originally I have a code like this

onError: (error: any) => {
    if (error.response?.status !== 401) {
      console.error('<Layout> getting generic input data', error);
     }
 },

onError: (error: any) => {
    if (error.response?.status !== 401) {
      console.error('<Layout> getting generic input data', error);
     }
 },

But now I am extracting const {error} from useQuery... and it has Error | null as type. Then it throws some typescript check that response is not the type.... how do I fix it properly? Thanks!

4 Replies

foreign-sapphireOP•2y ago

Is the //ts-ignore the only way to go for such?

conscious-sapphire•2y ago

depends. is this an axios error? if so, you can check for isAxiosError(error) && error.response?.status !== 401. isAxiosError can be imported iirc

conscious-sapphire•2y ago

you can also register a global error if you want all errors to always be AxiosErrors (though its's technically not correct because you can also get runtime errors that aren't of that type) https://tanstack.com/query/v5/docs/framework/react/typescript#registering-a-global-error

TanStack Query Docs

foreign-sapphireOP•2y ago

I also resolved it by adding extra types

export interface BackendError extends Error {
  response?: {
    status: number;
  };
}
// then write 
 if (
    isError &&
    (error as BackendError).response?.status !== 401
  ) {
    console.error(
      error
    );
  }

export interface BackendError extends Error {
  response?: {
    status: number;
  };
}
// then write 
 if (
    isError &&
    (error as BackendError).response?.status !== 401
  ) {
    console.error(
      error
    );
  }

Gaming

Programming

error Type

Did you find this page helpful?