Почему useLoaderData возвращает не Response, а уже сами данные?

Question

[Boris007]

Помещаю в Loaderэту функцию
В ней в thenпоказан объект Response

async function getUsers() {
  console.log('function getUsers')
  return fetch('http://localhost:3000/api/v1/users, {
    method: 'POST',
  })
  .then(data => {
    return data
  })
  .catch(() => null)
}

Но в компоненте при получении этих данных
const data = useLoaderData() as any
Почему-то dataуже не объект Response, а сами данные, будто я до этого сделал

.then(data => {
    return data.json()
  })

Как мне в useLoaderData() получать Response?

Answer 1

[Илья Бондаренко]

Об этом написано в документации React Router: тут

React Router автоматически вызовет response.json(), поэтому вашим компонентам не нужно будет анализировать его во время рендеринга

Конечно, можно сделать так, но не думаю что это хорошее решение:

async () => {
        const response = await fetch("https://jsonplaceholder.typicode.com/users")/
        return { response };
}

const { response } = useLoaderData();

Извините, а зачем вам получать объект Response в компоненте?

P.s. И ещё: если поставили async перед функций, то используйте синтаксис async/await, с промисами в этом нет смысла

Comments

[Boris007]

Думал обрабатывать статус ответа в компоненте, но потом вспомнил, что не получится без await провернуть такое

[Boris007]

Я могу как-то одновременно вернуть и данные и статус?
Получается так вернет нормально данные return data
А вот как вернуть данные + статус
return {data: data.json(), status: data.status}
Здесь он вернет в data Promise, который уже потом не обработать корректно в компоненте

[Илья Бондаренко]

Boris007, авторы предлагают так обрабатывать исключения: https://reactrouter.com/en/6.19.0/route/error-element

[Илья Бондаренко]

Boris007, Потому что json() это асинхронный метод, поэтому и промис возвращает. Тебе нужно сделать так:

async () => {
        const response = await fetch(
          "https://jsonplaceholder.typicode.com/users"
        );

        const status = response.status;
        const data = await response.json();

        return { data, status };
}