Если вы хотите, чтобы GraphQL работал с фреймворком Qausar, эта статья для вас.

Но прежде, чем погрузиться в реальный бизнес, вы должны знать основы обеих технологий, и для этого я бы посоветовал прочитать свои предыдущие статьи о Quasar и GraphQL.

Пакеты, которые мы собираемся использовать:

Приступим к разработке.

Настройка Quasar Project для использования Vue-Apollo:

Для использования Quasar вам необходимо установить его интерфейс командной строки, используя:

$ yarn global add @quasar/cli
# or
$ npm install -g @quasar/cli

Теперь используйте Quasar CLI, чтобы создать новый проект, используя:

$ quasar create quasar-graphql-app

После выполнения всех инструкций у вас будет готов проект квазара со всеми необходимыми пакетами для запуска этого проекта.

Пора интегрировать GraphQL в ваш проект.

Quasar следует очень сильной системе расширения приложений, позволяющей безболезненно внедрять библиотеки с различными зависимостями. GraphQL для Quasar также доступен как расширение. Давайте добавим это замечательное расширение в наш проект, используя:

$ quasar ext add @quasar/apollo

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

Кстати, в любой момент позже вы также можете удалить это расширение, используя:

$ quasar ext remove @quasar/apollo

Включите приложение Quasar для использования тега gql:

Чтобы заставить компоненты vue-apollo использовать тег gql, вы должны включить специальное преобразование, чтобы vue-loader не отказал в этих новых тегах. Добавьте приведенный ниже код в свойство build в вашем quasar.conf.js файле.

chainWebpack (chain, { isServer, isClient }) {
    chain.module.rule('vue')
      .use('vue-loader')
      .loader('vue-loader')
      .tap(options => {
        options.transpileOptions = {
          transforms: {
            dangerousTaggedTemplateString: true
          }
        }
        return options
      })
  }

Чтобы использовать файлы .gql или .graphql в вашем проекте, вам нужно добавить еще одно правило в chainWebpack, как показано ниже.

chain.module.rule('gql')
   .test(/\.(graphql|gql)$/)
   .use('graphql-tag/loader')
   .loader('graphql-tag/loader')

После внедрения приведенного выше кода проект готов к запуску GraphQL с Qausar.

Если вы заметили структуру папок проекта, вы должны увидеть quasar.extensions.json на корневом уровне. Это сообщает Quasar, что вы установили расширение приложения Apollo, и содержит ввод URI конечной точки GraphQL API.

{
  "@quasar/apollo": {
    "graphql_uri": "http://api.example.com"
  }
}

В вашем проекте вы также должны увидеть папку с именем «apollo», содержащую файлы apollo-client-config.js и apollo-client-hooks.js.

Параметры конфигурации Apollo Client могут быть добавлены в соответствии с требованиями в файле конфигурации, в то время как вы можете добавить собственный код в файл хуков, например, для обработки до или после инициализации приложения.

Вот и все, что ваш проект Quasar готов делать запросы GraphQL и вносить изменения в ваш сервер apollo-graphql. Самое приятное то, что вам не понадобится Vuex или какая-либо другая библиотека управления состоянием при использовании GraphQL.

Узнал что-то новое? Комментарии и отзывы всегда радуют писателя. Удачного кодирования!