How to handle error message from server in nextjs?

Answered

Sun bear posted this in #help-forum

Sun bearOP

2023-09-27T12:57:39.000Z

I am using react query with nextjs. If i try to get the errors, from react query it says this: Property 'message' does not exist on type '{}'.ts(2339)

Answered by riský

try this... i added lots of | undefined because your code had the ?.

interface ErrorMessage {
  response: {
    data: {
      message: string
    } | undefined
  } | undefined
}
  
const otpMutation = useMutation({
  mutationFn: (data: string) => verifyOtp(data),
  onError: (error: ErrorMessage)=>{
    console.log(error?.response?.data.message, 'err')
  }
});

View full answer

20 Replies

riský

2023-09-27T12:58:57.000Z

that is a typescript error...

if you share your code, i can sugest a way to make it not complain

Sun bearOP

2023-09-27T13:00:04.000Z

error?response?.data.message

i get the error message like this, but that ts error would not allow me to build the code

riský

2023-09-27T13:01:29.000Z

are you using typescript (.tsx) or javascript (.jsx)

Sun bearOP

2023-09-27T13:01:38.000Z

const otpMutation = useMutation({
mutationFn: (data: string) => verifyOtp(data),
onError: (error)=>{
console.log(error?response?.data.message, 'err')
}
});

@riský are you using typescript (.tsx) or javascript (.jsx)

Sun bearOP

2023-09-27T13:01:46.000Z

tsx

riský

2023-09-27T13:03:09.000Z

this should be easy then:

const otpMutation = useMutation({
  mutationFn: (data: string) => verifyOtp(data),
  onError: (error)=>{
    const data = error?.response?.data as {message: string} | undefined
    console.log(data?.message, 'err')
  }
});

this tells ts that data has message in data or is undefined

you can also just put // @ts-expect-error on the line before to make it ignore the issues (not very recommended)

Sun bearOP

2023-09-27T13:09:03.000Z

now it says: Property 'response' does not exist on type '{}'.ts(2339)

riský

2023-09-27T13:09:23.000Z

ahh i thought the error was from diferent

riský

2023-09-27T13:11:09.000Z

try this... i added lots of | undefined because your code had the ?.

interface ErrorMessage {
  response: {
    data: {
      message: string
    } | undefined
  } | undefined
}
  
const otpMutation = useMutation({
  mutationFn: (data: string) => verifyOtp(data),
  onError: (error: ErrorMessage)=>{
    console.log(error?.response?.data.message, 'err')
  }
});