Vue 和 GraphQL 与 Hasura 视频课程

您好，欢迎参加视频课程系列，在本课程中，我们将使用开源 Hasura GraphQL 引擎通过 GraphQL 创建 Vue 应用程序。

在本课程中，我们将逐步创建 Vue 博客 CMS，并介绍执行 GraphQL 查询、变异和订阅的主要方面。

我们将学习如何在 Heroku 上免费设置和部署 Hasura。我们将了解 Hasura 如何在新的（或现有的）Postgres 数据库上提供实时 GraphQL API，我们将使用该数据库构建我们的 Vue 应用。

查看下面的课程并享受学习的乐趣！

1. 什么是 GraphQL

在本视频中，我们将讨论 GraphQL 的基础知识以及它为何优于 REST。虽然本视频只涵盖了 GraphQL 的基本概念，但如果您想了解更多信息，建议您查看我最近参加的免费 GraphQL 训练营，以便更深入地了解 GraphQL 及其功能。

2. 使用 Hasura 引擎创建自动生成的 CRUD API

在本视频中，我们将介绍如何开始使用 Hasura 引擎，以及它如何自动生成 GraphQL API。我们将在本课程中定义我们将要构建的博客 cms 应用中使用的数据结构。

3. 使用远程模式和事件触发器扩展 CRUD API

本视频介绍了 Hasura 通过两种不同方法向 CRUD API 添加业务逻辑的功能：远程模式和事件触发器。远程模式主要允许您将 Hasura 自动生成的 GraphQL 模式拼接到您自己的服务器或外部 GraphQL API 的任何其他 GraphQL 模式。另一种方法是使用 Hasura 事件系统添加由数据库事件触发的无服务器函数。这两种方法将在课程的后续部分更详细地讲解。

4. 使用管理员密钥保护 Hasura GraphQL 端点

让您的 GraphQL 端点处于不安全状态是一个坏主意，因此在本视频中我们将介绍如何使用密钥保护您的 GraphQL 端点。

5. 在现有数据库上本地运行 Hasura 引擎

在本视频中，我们将从在 Heroku 中运行 Hasura 引擎过渡到使用 Docker 在本地运行，同时仍然连接到部署到 Heroku 的 Postgres 数据库。我们将看到前面步骤中定义的所有内容都保持不变，并演示该引擎如何在现有数据库以及新数据库上运行。正如您从本步骤中了解到的那样，只要您能够在 Docker 容器中运行引擎，基本上就可以在任何支持 Docker 的云环境中运行它。

6. 使用 Apollo 客户端设置 Vue 应用并查询数据

在本视频中，我们将使用 Vue CLI 创建 Vue 应用，并使用 Apollo Client 进行设置。我们将把它连接到本地 Docker 容器中已安全保护的 GraphQL 端点，并执行基本的 GraphQL 查询。

7. 执行 GraphQL 查询时的不同陷阱

在本视频中，我们将介绍查询数据的不同方式以及 apollo 客户端为我们提供的各种方法，以便我们可以按照自己想要的方式操作数据。

`ApolloQuery`8.在模板中使用组件

Apollo Client 附带 ApolloQuery 辅助组件，可让您将所有数据查询移至 Vue 模板内部。在本课中，我们将讨论如何使用它。此外，我们还将使用 .gql 文件，以便所有查询、修改和订阅都集中存储在文件系统中，从而更易于查找。

9. 在 Vue 应用中使用 GraphQL 突变插入帖子的不同方法

现在，我们可以轻松地以不同的方式查询数据，是时候让我们的应用程序更具交互性了。在本课中，我们将介绍如何在 Vue 应用程序中执行变更，以及如何通过创建 AddPost 表单插入新数据。

10. 使用`delete_posts`突变有条件地删除帖子

Hasura 以特定方式自动生成 GraphQL API。为了插入数据，我们使用了 insert_posts 突变。在本视频中，我们将学习如何使用 delete_posts 突变，以及如何使用 Hasura 提供的 where 输入类型为删除逻辑添加条件。

11. 使用订阅在 Vue 应用中配置实时更新

在本课中，我们将通过添加 Hasura 引擎自动生成的 GraphQL 订阅，最终为应用添加实时功能。我们将重新配置 Apollo 客户端，从使用 apollo-boost 等简单解决方案到更复杂的订阅设置。我们将学习如何在 Apollo 提供程序中使用 $subscribe，并了解数据如何实时更新。

`subscribeToMore`12.定义查询以获取部分更新时使用

在本课中，我们将学习如何使用订阅来获取部分数据并补充我们定义的查询。这样，我们无需重新加载整个数据集，只需加载最新添加的数据即可。

13. 将`subscribeToMore`其移动到模板中，使其更具声明性

在本课中，我们将看到如何使用ApolloSubscribeToMore组件将所有查询和订阅语法移动到更具声明性的模板。

结论

如您所见，完成本视频课程后，您将有足够的信心使用 Hasura 的 GraphQL API 创建自己的 Vue 应用。如果您喜欢本课程内容，请在 Twitter 上分享，并提及@VladimirNovick和@HasuraHQ，并提出您希望在课程后续及更高级的部分中学习的内容。本课程计划涵盖身份验证、权限管理、Vuex、将 Hasura 与您自己的 GraphQL 服务器结合使用，以及使用无服务器函数添加业务逻辑。
此外，请务必关注以下 YouTube 频道以获取更多内容：

Vladimir Novick Youtube 频道
 Hasura Youtube 频道

课程库

如有疑问请联系Discord

文章来源：https://dev.to/hasurahq/vue-and-graphql-with-hasura-video-course-3mpp