В Nuxt мне следует использовать asyncData или запросы Apollo по умолчанию?

Я создаю сайт с помощью Nuxt / Vue, и он использует API-интерфейс GraphQL backend. Мы получаем доступ к этому с помощью модуля Apollo для Nuxt.

В компоненте страницы вы можете сделать это (я думаю, это называется интеллектуальным запросом, но я не уверен):

    apollo: {
        pages: {
            query: pagesQuery,
            update(data) {
                return _get(data, "pageBy", {})
            }
        },
    }

Но вы также можете выполнить такой запрос, я думаю, используя хук Nuxt asyncData:

  asyncData (context) {
    let client = context.app.apolloProvider.defaultClient
    client.query({query, variables})
        .then(({ data }) => {
          // do what you want with data
        })
  }

Я не уверен, в чем разница между этими двумя способами и какой из них лучше. Кто-нибудь знает? Я нигде не мог найти объяснения в документации.


async-await nuxt.js graphql vue-apollo
person Drew Baker    schedule 27.04.2019    source источник
comment
Использование asyncData не обновляет кеш Apollo автоматически, в то время как интеллектуальный запрос делает это.   -  person Zelid    schedule 18.07.2019

Ответы (1)


arrow_upward
12
arrow_downward

Да, хороший вопрос. Код, который вы показали вверху, действительно называется интеллектуальным запросом. По факту

Каждый запрос, объявленный в определении apollo (то есть который не начинается с символа $ char) в компоненте, приводит к созданию объекта интеллектуального запроса.

Проект nuxt, использующий модуль @ nuxtjs / apollo, может использовать их прямо из коробки. Прелесть интеллектуального запроса заключается в опциях, которые у него есть, и одна из них - опция «предварительной выборки». Это, как кажется, позволяет выполнять предварительную выборку и по умолчанию установлено значение true. Он также может принимать объект переменных или функцию. Вы можете увидеть документы здесь.

Это означает, что результат интеллектуального запроса или запроса asyncData будет по существу одинаковым. Они должны быть решены в одинаковые сроки.

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

Подробнее об интеллектуальных запросах здесь.

person Andrew1325    schedule 28.04.2019
comment
Значит, умный запрос все равно не блокирует? Я беспокоюсь, что моей странице SSR придется дождаться завершения всех этих запросов, прежде чем что-либо показывать пользователю. - person Drew Baker; 28.04.2019
comment
Я понимаю, что запрос ведет себя так же, как asyncData, в том смысле, что он является асинхронным, и сервер предварительно загружает данные в выделенное хранилище данных во время предварительного рендеринга и вводит их в клиент после завершения. Я не заметил какого-либо блокирующего поведения, но у меня есть только пара проектов, использующих их. - person Andrew1325; 28.04.2019
comment
Asyncdata ожидает готовности данных перед рендерингом как на клиенте, так и на сервере - person Aldarund; 28.04.2019