TL;DR: Создавайте отзывчивые SPA, SSR Apps, PWA, гибридные мобильные / электронные приложения, используя единую кодовую базу с Quasar Framework и Hasura GraphQL Engine. Мгновенная настройка. Tutorial/boilerplate -> quasar-framework-vue-graphql
Quasar Framework
Quasar Framework — это высокопроизводительный фреймворк Vue.js, который позволяет разработчикам создавать различные типы приложений с единой кодовой базой.
С помощью Quasar вы можете иметь единую кодовую базу для:
- одностраничных приложений (SPA)
- Приложения с рендерингом на стороне сервера (SSR)
- Мобильные приложения для iOS/Android
- Настольные приложения
- PWAs
- Гибридные приложения
Проще говоря, Quasar позволяет создавать кросс-платформенные приложения.
Хотя он работает на базе Vue.js, он поставляется с собственным набором встроенных веб-компонентов, которые можно импортировать для построения пользовательских интерфейсов.
Hasura с Quasar
Hasura — это движок GraphQL с открытым исходным кодом, который предоставляет вам API GraphQL в реальном времени на новых или существующих базах данных Postgres. Он поставляется со встроенной поддержкой для сшивания пользовательских GraphQL API и позволяет запускать веб-крючки на изменения в базе данных.
Hasura GraphQL отлично вписывается в этот рабочий процесс создания кросс-платформенных приложений. Все клиенты (мобильное приложение/электронное приложение) используют один и тот же набор API, управляемых одним и тем же набором разрешений и авторизации. Это означает, что он может использовать всю мощь Postgres. Quasar дает бесконечные возможности с одной кодовой базой, а стандартный GraphQL API от Hasura облегчает рабочий процесс разработки.
На следующем этапе вы узнаете, как настроить Apollo Client с Quasar и выполнять GraphQL-запросы.
Расширения приложений Quasar
Quasar позволяет разработчикам расширять функциональные возможности приложения с помощью расширений. Примером расширения может быть @quasar/apollo, которое позволяет использовать GraphQL и Apollo Client в вашем приложении Quasar.
В Quasar вы можете установить расширения следующим образом:
quasar ext add @quasar/apollo@next
Приведенная выше команда устанавливает расширение и создает два дополнительных файла:
Следующим шагом будет регистрация расширения в файле quasar.config.js. Откройте файл и добавьте «apollo.js» в массив boot. Посмотрите часть конфигурационного файла, в которой необходимо внести изменения:
module.exports = configure(function (ctx) {
return {
boot: ["apollo.js"],
};
});
Вы закончили установку и настройку расширения. Следующий шаг включает использование клиента Apollo для выполнения GraphQL-запросов.
Выборка авторов
На главной странице приложения будут перечислены все авторы. Вы можете нажать на имя автора, чтобы просмотреть его статьи.
Quasar поставляется со всевозможными компонентами пользовательского интерфейса, которые вы можете использовать для создания приложения с «родным» ощущением.
В приведенном ниже фрагменте кода вы используете эти компоненты пользовательского интерфейса для создания пользовательского интерфейса. Добавьте этот код в файл layouts/MainLayout.vue:
<template>
<q-layout view="lHh Lpr lFf">
<q-header elevated>
<q-toolbar>
<q-btn
flat
dense
round
icon="menu"
aria-label="Menu"
@click="toggleLeftDrawer"
/>
<q-toolbar-title
class="my-box cursor-pointer q-hoverable"
@click="this.$router.push(`/`)"
>
Quasar App with Hasura GraphQL Engine
</q-toolbar-title>
<div>Running on Quasar v{{ $q.version }}</div>
</q-toolbar>
</q-header>
<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
<q-list>
<q-item-label header> Author List </q-item-label>
<q-item v-for="author in authors" :key="author.id">
<q-item-section class="my-box cursor-pointer q-hoverable">
<q-item-label @click="fetchArticle(author)">
{{ author.name }}
</q-item-label>
<q-item-label caption>ID: {{ author.id }}</q-item-label>
</q-item-section>
</q-item>
</q-list>
</q-drawer>
<q-page-container>
<router-view />
</q-page-container>
</q-layout>
</template>
В приведенном выше коде выполняется цикл по массиву авторов, а также используется метод fetchArticles. Это означает, что вам нужно получить авторов из базы данных и определить метод для получения статей.
Напишите следующий код в том же файле:
<script>
import { defineComponent, ref } from "vue";
import { useRouter } from "vue-router";
import { useQuery, useResult } from "@vue/apollo-composable";
import gql from "graphql-tag";
export default defineComponent({
name: "MainLayout",
setup() {
const leftDrawerOpen = ref(false);
const router = useRouter();
const { result, loading, error } = useQuery(gql`
query {
author {
id
name
}
}
`);
const authors = useResult(result, null, (data) => data.author);
const fetchArticle = (author) => {
return router.push(`/author/${author.id}`);
};
return {
authors,
leftDrawerOpen,
fetchArticle,
toggleLeftDrawer() {
leftDrawerOpen.value = !leftDrawerOpen.value;
},
};
},
});
</script>
Вы используете Apollo Client для запроса базы данных и получения авторов. Вы также определяете метод fetchArticle, который направляет пользователей на нужную страницу при нажатии на имя автора.
Код все тот же, который вы написали бы в приложении Vue.js для выполнения GraphQL-запроса с помощью vue-apollo. Разница заключается в части <template>, где Quasar использует native-подобные компоненты для создания гибридных приложений.
Выборка статей
У каждого автора может быть одна или несколько статей, поэтому вам нужно создать страницу «Статьи» для списка этих статей. Вы можете использовать Quasar CLI для создания новой страницы:
quasar new page Articles
Команда создает файл .vue в папке src/pages. Теперь необходимо сослаться на него в файле routes, чтобы пользователи могли получить к нему доступ.
Откройте файл src/router/routes.js и добавьте маршрут:
{
path: "/",
component: () => import("layouts/MainLayout.vue"),
children: [
{
path: "/author/:authorId",
component: () => import("pages/Articles.vue"),
},
{ path: "", component: () => import("pages/IndexPage.vue") },
],
},
Обратите внимание на путь /author/:authorId. Пример такого URL вы можете увидеть на изображении ниже.
Когда вы посещаете автора, вы можете увидеть все статьи, написанные этим автором.
Перейдите в файл src/pages/Articles.vue и замените содержимое этим шаблоном:
<template>
<q-page padding>
<q-item v-for="article in articles" :key="article.id">
<q-item-section class="my-box cursor-pointer q-hoverable">
<q-item-label>
{{ article.title }}
</q-item-label>
<q-item-label caption>ID: {{ article.id }}</q-item-label>
<q-item-label>
{{ article.content }}
</q-item-label>
</q-item-section>
</q-item>
</q-page>
</template>
Вы используете компоненты Quasar UI для отображения статьи:
- title
- id
- содержание
Теперь пришло время получить статьи из бэкенда Hasura. Добавьте следующий код после раздела template:
<script>
import { watch } from "vue";
import { useQuery, useResult } from "@vue/apollo-composable";
import { useRoute } from "vue-router";
import gql from "graphql-tag";
export default {
name: "PageName",
setup() {
const route = useRoute();
const { result, loading, error, refetch } = useQuery(
gql`
query articleQuery($authorId: Int!) {
article(where: { author_id: { _eq: $authorId } }) {
id
title
content
}
}
`,
{
authorId: route.params.authorId,
}
);
const articles = useResult(result, null, (data) => data.article);
watch(
() => route.params.authorId,
async (newId) => {
refetch({ authorId: newId });
}
);
return {
articles,
};
},
};
</script>
В приведенном выше коде вы:
- используете клиент Apollo для получения статей из базы данных
- передавать параметр
authorId, чтобы получить статьи для этого конкретного автора - повторная выборка статей при изменении идентификатора автора (из URL).
Таким образом, когда вы посещаете URL, например https://your-app.com/author/1, на странице отображаются статьи автора, чей ID равен «1».
Цели сборки
Quasar требует, чтобы вы указали режим приложения spa|ssr|pwa|cordova|electron и цель cordova|electron — в случае, если это гибридное приложение. Вы также можете указать такие темы, как material и ios, которые будут соответствующим образом применять стили каждого компонента.
Подробнее о целях сборки вы можете прочитать здесь.
Есть шаблон и краткое руководство, чтобы помочь вам быстро начать работу! Ознакомьтесь с ними на Github.
Попробуйте и дайте нам знать, что вы думаете. Если у вас возникнут вопросы или проблемы, обращайтесь к нам в Twitter, на Github или на наш сервер Discord.