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

Question

Я создаю сайт с 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
        })
  }

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

Answer 1

Да, хороший вопрос.Код, который вы показали вверху, действительно называется Smart Query.Фактически

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

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

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

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

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