Обработка неавторизованного запроса в response-query

Question

У меня проблемы с использованием response-query. Всякий раз, когда ответ от сервера является Неавторизованным, useQuery возвращает flags status='success' и isError=false. Статус ответа сервера - 401, а содержимое ответа json -{ error: true, message: 'UNAUTHORIZED' }. Никак не настраивал response-query.

Я не использую ReactQueryConfigProvider и непередаю какие-либо параметры в вызове для настройки поведения.

Это призыв:

const { status, data, error } = useQuery(
  ["hotelsList", { token: token }],
  getHotels
);

А это сервис:

const getHotels = async ({ token }) => {
  const uri = process.env.REACT_APP_API_ENDPOINT_v2 + `/hotels`
  return (await fetch(uri, {
    method: "get",
    headers: {
      Authorization: "Bearer " + token,
      "Content-Type": "application/json"
    }
  })).json()
}

Поскольку токен недействителен, сервер отвечает кодом состояния 401 и моим настраиваемым ответом json.

Это объекты данных и ошибок из response-query.

Answer 1

React-query не зависит от вашего API, что ошибка должна изменяться только тогда, когда ваш API не отвечает, когда вы получите ошибку, но если сервер отвечает 404 или 401 и т. Д., Response-query не заботится, потому что это правильный ответ, response-query - это только шлюз для ответа, который он не обрабатывает в useQuery, я сделал здесь демонстрацию: вы можете видеть, что URL-адрес неправильный (указывает на 404), и он возвращает 404, он выиграл ' t влияет на значение ошибки, но попробуйте изменить URL-адрес API, например, на github.x, это не удастся, потому что ответ не был возвращен, и значение ошибки изменится

Демонстрация CodeSandbox

Answer 2

Чтобы расширить ответ Chamsddine, мне нужно было выдать ошибку, когда ответ на выборку был неправильным. Это включило все флаги ошибок в ответном запросе.

const response = await fetch(uri, {
  method: "get",
  headers: {
    Authorization: "Bearer " + token,
    "Content-Type": "application/json"
  }
})
if (!response.ok) throw new Error(response.statusText)
return await response.json()

Answer 3

Ни одно из решений не работает с Typescript, я сделал следующее:

 const { isLoading, error, data } = useCampaign()
  let myCustomErrorLet: any = {}
  myCustomErrorLet.data = error
  console.log(myCustomErrorLet?.data?.response);