Как в react-router-dom сделать чтобы loader не блокировал рендер страницы?

Question

[Return Me Void]

В данном роутере можно назначить loader для роута - функция для фетча данных до загрузки компонента.

По умолчанию исполнение loader'a блокирует рендер компонента, пока он не получит ответ от сервера. Можно ли как-нибудь отключить блокирование рендера и дождаться прихода данных уже в загруженном компоненте?

P.S. Это критично, т.к. использую lazy загрузку в роутере.

Comments

[Aetae]

Ну собсно у людей обычно обратная проплема.:)
Какие проблемы использовать дефалтный подход с загрузкой внутри компонента, типа:

const [data, setData] = useState(defaultData);

useEffect(() => {
  fetch(...).then(...).then(setData)
}, []);

Или ты хочешь не переписывая ничего какой-то магический параметр добавить? Тогда для начала код в студию.

[Return Me Void]

Aetae, я же говорю, у меня lazy загрузка компонента и, пока он загружается, я хотел бы начать отправлять запрос на сервер, чтобы когда он загрузился, было меньше времени ждать для ответа.

Понятно, что если сделать синхронно, как ты предлагаешь, - запрос сразу в компоненте, - оно будет работать, но запрос начнёт отправку только после загрузки компонента.

https://reactrouter.com/en/main/route/loader

Answer 1

[Aetae]

Сам не пользовался, но по докам вроде никаких магических параметров не вижу.

Вот тебе тогда вспомогательные функции которые сделают то, что тебе надо:

import { json, useLoaderData } from "react-router-dom";
import { useEffect } from "react";

export function eagerLoader(loader) {
  return (...args) => {
    const promise = loader(...args)
      .then(res => res instanceof Response ? res.json() : res );
    return json({ promise }, { status: 200 });
  }
}

export function useEagerLoaderData(defaultData) {
  const [data, setData] = useState(defaultData);
  const promise = useLoaderData()?.promise;

  useEffect(() => {
    promise?.then(setData);
  }, [promise]);

  return data;
}

let route = {
  path: "...",
  loader: eagerLoader(({ request }) => ...),
  lazy: () => import("./Comp"),
};

const Comp = () => {
  const data = useEagerLoaderData([]);

  //...
}

Код не проверял, но думаю логика очевидна.:)

P.S. defaultData мб стоит вынести в обёртку eagerLoader, хз, тут сам смотри свои юзкейсы.:)

Comments

[Return Me Void]

Слушай, ну чтоб обмануть роутер...)) Я бы до такого не додумался :D
Спасибо, буду пробовать