Shmebilock

доки, которые говорят сами за себя:

The GraphQLModule is nothing more than a wrapper around the Apollo server.

Скорее вопрос - можете ли вы _не_ использовать apollo в nest, но кому это нужно.

Пример упрощения:

const Example = ({ disabled, onChange }) => {
  const [isActive, setIsActive] = useState(false);

  const handleClick = useCallback((e) => {
    e.stopPropagation();
    if (disabled) return;
    setIsActive(!isActive);
    onChange(!isActive);
  }, [isActive, disabled]);

  return <Switch onClick={handleClick} />;
};

React.lazy нужен для асинхронной подгрузки компонентов. Использовать можно в случаях когда заранее неизвестно откуда нужно импортить компонент. Собственно в нем и используется асинхронный импорт.

const MyLazyComp = React.lazy(() => import(`Comps/${path}`));

Можно использовать например с react-router для асинхронной подгрузки страниц по требованию.

Для начала разберемся с динамической структурой: то, что импортируется и экспортируется, может меняться во время рантайма (англ. runtime).
Когда мы используем статическую структуру, это значит, что мы можем определить все импорты и экспорты только один раз, во время компиляции (модулей в бандл - большой общий файл грубо говоря).
Также при статической структуре модулей нам не надо выполнять код модуля, чтобы найти все импорты и экспорты. Они располагаются на верхнем уровне, потому что система модулей ES6 заставляет нас располагать импорты и экспорты в глобальном скоупе (англ. scope). Мы просто смотрим на исходный код и видим, что экспортируется и импортируется и самое главное что это неизменно на протяжении всего рантайма.
Инструкции import и export также не должны иметь динамических частей.

В конце покажу два примера НЕстатической структуры (чтобы стало понятно, как отличать одно от другого):

Мы должны выполнить этот код, чтобы понять, что он будет импортировать:

let my_lib;
if (Math.random()) {
    my_lib = require('foo');
} else {
    my_lib = require('bar');
}

Во втором примере мы должны запустить код, чтобы узнать, что он экспортирует:

if (Math.random()) {
    exports.baz = ···;
}

Этот подход является менее гибким, чем динамический, но у него есть много своих преимуществ. Почитать о них и посмотреть примеры можно вот здесь: , пункт "16.8 Design goals for ES6 modules".

вот готовый
https://www.npmjs.com/package/react-hover
cht8687.github.io/react-hover/example

а так вешаешь на onMouseOver элемента (ссылки на другую страницу) какой-то обработчик, который будет добавлять новый div position:absolute с нужным содержимым

Просто tooltip с ajax запросом