Если вы хотите, чтобы 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.
Узнал что-то новое? Комментарии и отзывы всегда радуют писателя. Удачного кодирования!