Рекомендуемый способ ожидания запроса Apollo перед отображением следующей страницы?

Question

При использовании модуля Apollo в приложении Nuxt поведение по умолчанию при изменении маршрутов заключается в немедленном отображении новой страницы, прежде чем данные будут получены через Apollo.

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

Какой рекомендуемый способ ожидания запросов Apollo на странице (и его подкомпоненты) завершить перед отображением страницы?

(Есть связанный вопрос , который не указан c для Nuxt, но я не уверен, как перевести рекомендацию в приложение Nuxt.)

Мне бы хотелось увидеть пример кода использования beforeRouteEnter для извлечения данных через Apollo и ввода маршрута только после извлечения данных.

Answer 1

Я незнаком с Аполлоном, но думаю, это то, что вы ищете:

// Router.js
beforeRouteEnter(to, from, next)
{
    executeSomeApolloPromise().then((data) => {
        // The promise has now been complete; continue to the component.
        next((vm) => {
            // You have access here to the component instance via `vm`.
            // Note that `beforeRouteEnter` is the only guard that has this.
            vm.someApolloData = data;
        });
    });
}

См. https://router.vuejs.org/guide/advanced/navigation-guards.html#per -route-guard

Answer 2

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

Это зависит только от того, хотите ли вы предварительно заполнить store:
https://github.com/nuxt-community/apollo-module#nuxtserverinit
https://nuxtjs.org/guide/vuex-store/#the -nuxtserverinit-action

или только одна страница:
https://github.com/nuxt-community/apollo-module#asyncdatafetch -method-of-page-component
https://nuxtjs.org/guide/async-data

Вы можете использовать async / await или обещания, если у вас есть более одного запроса до отображения страницы.

Когда асин c действия завершены, Nuxt начинает рендеринг страницы. Это работает для SSR, и если вы переходите к страницам на клиенте (nuxtServerInit срабатывает только один раз при выполнении реального запроса, а не при переходе на стороне клиента).

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