Несколько компонентов с несколькими клиентскими приложениями useQuery Apollo

У меня есть страница визуализации данных, на которой есть много графиков, карт и т. Д. Для визуализации данных. Я подошел к проблеме, сохранив для каждой визуализации отдельный автономный компонент. Итак, теперь у меня есть ~ 20 компонентов, каждый из которых выполняет useQuery, что замедляет время загрузки из-за нагрузки.

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

Я искал способ, чтобы те, которые находятся в поле зрения, загружались первыми, а загружались только при прокрутке вниз. Это кажется многообещающим, но мне интересно, правильный ли это подход или есть более простой способ расставить приоритеты для запросов Apollo в компонентах вверху страницы.

Я искал других людей, у которых есть эта проблема, но я мало что видел, и документы Apollo на самом деле не решают ее, поскольку они, как правило, связаны с одним компонентом, выполняющим один или два запроса.


person mbn    schedule 09.12.2020    source источник
comment
Здесь есть несколько хороших вариантов: stackoverflow.com/questions/53757229/   -  person Jesse Carter    schedule 09.12.2020


Ответы (1)


Взгляните на это репозиторий.

Используйте параметр пропуска в useQuery, чтобы не выполнять выборку, если она не находится в области просмотра.

Вероятно, установите ширину / высоту по умолчанию для каждого компонента графика и некоторого изображения-заполнителя.

person Abraham Labkovsky    schedule 09.12.2020
comment
Спасибо, я наткнулся на: реакция-пересечение-наблюдение. Оба решения используют один и тот же подход: рендеринг не выполняется до тех пор, пока не появится порт просмотра. Это сработало, и я думаю, что это единственный (лучший) подход к решению этой проблемы. - person mbn; 10.12.2020