Avoiding state-sync when awaiting response body on error

Our API returns specific error messages as JSON in the response body on errors. So the HTTP code is 401 and the body has something like

{ error: 'Invalid password' }

{ error: 'Invalid password' }

.

I'm trying to avoid the onError callback when writing my useQuery/useMutation code (since those callbacks are being deprecated) and this article explains the downsides to how this stuff leads to "state sync" but I can't find any way to avoid it because JSON body doesn't get parsed when there's an error, so I have to do it myself (I'm using

ky

ky

as the http lib).

If there's an error, it seems like I have to use

await error.response.json()

await error.response.json()

to get the actual JSON data and that has to be done inside a callback or a useEffect.

Is there a better way?

const {
  error,
  isError,
  isSuccess,
  mutate: login,
  status
} = useMutation({
  mutationFn: ({ username, password }: Model) => {
    const formData = new FormData()
    formData.append('username', username)
    formData.append('password', password)

    return ky.post('api/login', { body: formData })
  }
})

if (isSuccess) {
  navigate(searchParameters.get('returnTo') ?? import.meta.env.BASE_URL, { replace: true })
}

useEffect(() => {
  const getError = async (): Promise<void> => {
    if (error instanceof HTTPError) {
      const result = await (error.response as KyResponse).json<APIError>()
      setErrorMessage(result.error)
    } else if (error instanceof Error) {
      setErrorMessage(error.message)
    } else {
      setErrorMessage('An unknown error occurred.')
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  getError()
}, [error, setErrorMessage])

const {
  error,
  isError,
  isSuccess,
  mutate: login,
  status
} = useMutation({
  mutationFn: ({ username, password }: Model) => {
    const formData = new FormData()
    formData.append('username', username)
    formData.append('password', password)

    return ky.post('api/login', { body: formData })
  }
})

if (isSuccess) {
  navigate(searchParameters.get('returnTo') ?? import.meta.env.BASE_URL, { replace: true })
}

useEffect(() => {
  const getError = async (): Promise<void> => {
    if (error instanceof HTTPError) {
      const result = await (error.response as KyResponse).json<APIError>()
      setErrorMessage(result.error)
    } else if (error instanceof Error) {
      setErrorMessage(error.message)
    } else {
      setErrorMessage('An unknown error occurred.')
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  getError()
}, [error, setErrorMessage])

TanStack•3y ago•

3 replies

thick-teal

Avoiding state-sync when awaiting response body on error

Our API returns specific error messages as JSON in the response body on errors. So the HTTP code is 401 and the body has something like

{ error: 'Invalid password' }

{ error: 'Invalid password' }

ky

ky

as the http lib).

If there's an error, it seems like I have to use

await error.response.json()

await error.response.json()

to get the actual JSON data and that has to be done inside a callback or a useEffect.

Is there a better way?

const {
  error,
  isError,
  isSuccess,
  mutate: login,
  status
} = useMutation({
  mutationFn: ({ username, password }: Model) => {
    const formData = new FormData()
    formData.append('username', username)
    formData.append('password', password)

    return ky.post('api/login', { body: formData })
  }
})

if (isSuccess) {
  navigate(searchParameters.get('returnTo') ?? import.meta.env.BASE_URL, { replace: true })
}

useEffect(() => {
  const getError = async (): Promise<void> => {
    if (error instanceof HTTPError) {
      const result = await (error.response as KyResponse).json<APIError>()
      setErrorMessage(result.error)
    } else if (error instanceof Error) {
      setErrorMessage(error.message)
    } else {
      setErrorMessage('An unknown error occurred.')
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  getError()
}, [error, setErrorMessage])

const {
  error,
  isError,
  isSuccess,
  mutate: login,
  status
} = useMutation({
  mutationFn: ({ username, password }: Model) => {
    const formData = new FormData()
    formData.append('username', username)
    formData.append('password', password)

    return ky.post('api/login', { body: formData })
  }
})

if (isSuccess) {
  navigate(searchParameters.get('returnTo') ?? import.meta.env.BASE_URL, { replace: true })
}

useEffect(() => {
  const getError = async (): Promise<void> => {
    if (error instanceof HTTPError) {
      const result = await (error.response as KyResponse).json<APIError>()
      setErrorMessage(result.error)
    } else if (error instanceof Error) {
      setErrorMessage(error.message)
    } else {
      setErrorMessage('An unknown error occurred.')
    }
  }
  // eslint-disable-next-line @typescript-eslint/no-floating-promises
  getError()
}, [error, setErrorMessage])

Avoiding state-sync when awaiting response body on error

Similar Threads

Avoiding state-sync when awaiting response body on error

Similar Threads

Similar Threads

Similar Threads