«Запросы Apollo по умолчанию» VS «AsyncData» (Nuxt.js)
Я создаю сайт с Nuxt/Vue, и он использует внутренний API GraphQL. Мы получаем доступ к этому с помощью модуля Apollo для Nuxt.
В компоненте страницы вы можете сделать это (думаю, это называется Smart Query, но я не уверен):
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
});
}
}
Я не уверен, в чем разница между этими двумя способами, и что лучше. Кто-нибудь знает? Я нигде не мог найти объяснение в документах.
Ответы 1
Да, хороший вопрос. Код, который вы показали вверху, действительно называется Smart Query. Фактически
Each query declared in the apollo definition (that is, which doesn't start with a $ char) in a component results in the creation of a smart query object.
Проект nuxt, использующий модуль @nuxtjs/apollo, может использовать их из коробки. Прелесть интеллектуального запроса заключается в его параметрах, и одним из них является параметр «предварительная выборка». Это, как это звучит, разрешает предварительную выборку и по умолчанию имеет значение true. Он также может принимать объект переменных или функцию. Вы можете увидеть документы здесь.
Это означает, что результат интеллектуального запроса или запроса asyncData будет практически одинаковым. Они должны быть решены в те же сроки.
Так почему же выбрать одно или другое? Это, вероятно, будет зависеть от предпочтений, но со всеми параметрами, которые позволяет интеллектуальный запрос, вы можете делать гораздо больше, и вы можете включать подписки, которые могут быть невозможны в asyncData.
Подробнее об умных запросах здесь.
Значит, умный запрос все равно не блокирует? Я беспокоюсь, что моей странице SSR придется ждать завершения всех этих запросов, прежде чем показывать что-либо пользователю.
Насколько я понимаю, запрос ведет себя так же, как asyncData, в том смысле, что он асинхронный, и сервер предварительно загружает данные в выделенное хранилище данных во время предварительного рендеринга и вводит их в клиент после завершения. Я не заметил никакого блокирующего поведения, но у меня есть только пара проектов, использующих их.
Asyncdata ожидает готовности данных перед рендерингом как на клиенте, так и на сервере.
Использование
asyncDataне обновляет кэш Apollo автоматически, в отличие от интеллектуального запроса.