vue 三、设置我们的聊天应用——AWS Amplify 环境和 GraphQL

三、设置我们的聊天应用——AWS Amplify 环境和 GraphQL

自 2012 年 Facebook 推出 GraphQL 以来，它就像飓风一样席卷了整个网络。大型公司开始采用它，而中小型公司已经看到了这种基于查询的 API 的潜力。

一开始它看起来很奇怪，但当您开始阅读和体验更多它时，您就不想再使用 RESTAPI 了。简单性和数据获取功能使前端开发人员的生活更加轻松，因为他们只能获取他们想要的，并且不与只提供一条信息的端点绑定。

这是一个很长的配方的开始，所有配方都将形成一个完整的聊天应用，但是您可以在配方中学习 GraphQL 和 AWS Amplify，而无需编写整个章节的代码。

在本章中，我们将进一步了解 AWS Amplify 环境和 GraphQL，以及如何将其添加到我们的应用中，并将其作为通信驱动程序使用。

在本章中，我们将介绍以下配方：

创建 AWS 放大环境
创建第一个 GraphQLAPI
将 GraphQL 客户端添加到应用
为应用创建 AWS 放大驱动程序

技术要求

在本章中，我们将使用Node.js、AWS Amplify、和类星体框架。

**Attention, Windows users! You need to install an NPM package called windows-build-tools to be able to install the required packages. To do it, open PowerShell as an administrator and execute the following command: > npm install -g windows-build-tools

要安装Quasar Framework，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @quasar/cli

要安装AWS Amplify，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @aws-amplify/cli

创建 AWS 放大环境

在 AWS Amplify 的帮助下，我们可以创建一个在几分钟内就准备好的后端环境，它有一个 NoSQL 数据库、GraphQL 解析器和一个在线 bucket，供我们在开发后部署应用。

要创建 Vue 应用，我们将使用 Quasar 框架。它是一个基于 Vue 的框架，提供开发应用所需的所有工具、结构和组件。

在本食谱中，我们将学习如何创建 AWS 帐户，在本地配置 AWS Amplify 环境，以及使用 Quasar Framework 创建初始项目。

准备

此配方的先决条件是 Node.js 12+。

所需的 Node.js 全局对象如下：

@aws-amplify/cli
@quasar/cli

怎么做。。。

我们将把本配方中的任务分为四个部分：创建 AWS 帐户、配置 AWS Amplify、创建您的 Quasar 项目以及初始化 AWS Amplify 项目。

创建 AWS 帐户

在这里，我们将学习如何在 AWS 门户上创建帐户，以便访问 AWS 控制台：

转到https://aws.amazon.com 。
在网站上，单击“创建 AWS 帐户”按钮。
选择创建专业帐户或个人帐户（因为我们将探索平台并为自己开发示例应用，所以最好使用个人帐户）。
现在亚马逊将要求您提供付款信息，以防您的使用量超过免费级别限制。
是时候确认您的身份了——您需要提供一个有效的电话号码，亚马逊将使用该号码向您发送您需要输入的 PIN 码。
收到 PIN 码后，您将看到一个成功屏幕和一个继续按钮。
现在您需要为您的帐户选择一个计划；您可以为此配方选择基本计划选项。
现在您已经完成了，您可以登录到 AmazonAWS 帐户控制台。

配置 AWS 放大

让我们配置本地 AWS Amplify 环境，为开始开发聊天应用做好准备：

要设置 AWS Amplify，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> amplify configure

浏览器将打开，您需要登录 AWS 控制台帐户。
登录后，返回终端并按回车。CLI 将要求您选择要在其中执行应用的服务器区域。建议在us-east-1上运行。
选择区域后，CLI 将要求您为身份和访问管理（IAM定义用户名。您可以通过按输入使用默认值，或键入您想要的值（但必须是唯一的）。
现在，浏览器将打开以定义指定用户的用户详细信息。单击“下一步：权限”按钮转到下一屏幕。
点击下一步：标签按钮进入 AWS 标签屏幕。在此屏幕上，单击“下一步：查看”按钮查看您定义的设置。
现在您可以点击创建用户按钮创建用户并进入访问键屏幕。
最后，在此屏幕上，等待访问密钥 ID 和机密访问密钥可用。在浏览器上复制访问密钥 ID，粘贴到终端上，然后按回车。
粘贴访问密钥 ID 后，您必须返回浏览器，点击机密访问密钥上的显示链接，复制值，粘贴到终端中，然后按回车。
最后，您将需要定义 AWS 概要文件名称（您可以通过按Enter使用默认名称）。

现在，您已经在计算机上设置了 AWS Amplify 环境。

创建您的 Quasar 项目

现在，我们将创建 Quasar Framework 项目，该项目将成为我们的聊天应用：

要创建 Quasar Framework 应用，需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> quasar create chat-app

Quasar CLI 将询问项目名称；它必须是有效的 npm 包名称：

> ? Project name (internal usage for dev) chat-app

CLI 将询问产品名称（通常用于渐进式 Web 应用（PWAs）、混合移动应用和电子应用）：

? Project product name (must start with letter if building mobile 
  apps) Chat App

之后，CLI 将要求提供项目说明，这将用于混合应用和 PWA：

? Project description A Chat Application

现在 CLI 将询问项目的作者。通常，它是您的 npm 或 Git 配置的：

? Author Heitor Ramon Ribeiro <heitor.ramon@example.com>

现在您可以选择 CSS 预处理器。我们将选择Stylus（您可以选择最适合您的）：

? Pick your favorite CSS preprocessor: (can be changed later) 
  Sass with indented syntax (recommended) 
  Sass with SCSS syntax (recommended) 
❯ Stylus 
  None (the others will still be available)

Quasar 有两种将组件、指令和插件导入构建系统的方法。您可以通过在quasar.conf.js中声明手动执行，也可以通过导入代码中使用的组件、指令和插件自动执行。我们将使用自动导入方法：

? Pick a Quasar components & directives import strategy: (can be changed later) (Use arrow key s)
❯ * Auto-import in-use Quasar components & directives - slightly
    higher compile time; next to minimum bundle size; most 
     convenient 
  * Manually specify what to import - fastest compile time; minimum 
     bundle size; most tedious 
  * Import everything from Quasar - not treeshaking Quasar; biggest 
     bundle size; convenient

现在我们必须选择将添加到项目中的默认功能；我们将选择ESLint、Vuex、Axios和Vue-i18n：

? Check the features needed for your project: (Press <space> to select, <a> to toggle all, <i> to invert selection) 
❯ ESLint 
 Vuex 
  TypeScript 
 Axios 
 Vue-i18n 
  IE11 support

现在您可以选择要在项目中使用的ESLint预设；在这种情况下，我们将选择AirBnB：

? Pick an ESLint preset: (Use arrow keys) 
  Standard (https://github.com/standard/standard) 
❯ Airbnb (https://github.com/airbnb/javascript) 
  Prettier (https://github.com/prettier/prettier)

您需要定义 Cordova/电容器 ID（即使您没有构建混合应用，也可以使用默认值）：

? Cordova/Capacitor id (disregard if not building mobile apps) 
  org.cordova.quasar.app

最后，您可以选择要运行的软件包管理器，并安装运行代码所需的软件包：

? Should we run `npm install` for you after the project has been 
  created? (recommended) (Use arrow keys) 
  Yes, use Yarn (recommended) 
❯ Yes, use NPM 
  No, I will handle that myself

初始化 AWS 放大项目

要初始化 AWS Amplify 项目，请执行以下步骤：

打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify init

Amplify CLI 将要求输入项目名称：

? Enter a name for the project: chatapp

然后，您需要为正在计算机上运行的当前项目定义一个环境：

? Enter a name for the environment: dev

现在，您可以选择将在项目中使用的默认编辑器：

? Choose your default editor: (Use arrow keys) 
❯ Visual Studio Code
  Atom Editor 
  Sublime Text
  InteliJ IDEA
  Vim (via Terminal, Mac OS only)
  Emac (via Terminal, Mac OS only)
  None

您必须决定 AWS Amplify 将承载何种类型的项目。在我们的例子中，这将是一个 JavaScript 应用：

? Choose the type of app that you're building? (recommended) (Use 
   arrow keys) 
  android 
  ios 
❯ javascript

对于框架，由于我们将使用类星体框架作为基础，我们需要从给出的框架列表中选择none：

? What javascript framework are you using? (recommended) (Use arrow 
  keys) 
  angular 
  ember
  ionic
  react
  react-native
  vue 
❯ none

您必须定义应用的源路径；您可以将源目录路径保留为默认值src。然后按进入继续：

? Source Directory Path: (src)

对于分发目录，由于 Quasar 使用不同类型的路径组织，我们需要将其定义为dist/spa：

? Distribution Directory Path: dist/spa

对于 AWS Amplify 将在部署前运行的 build 命令，我们将其定义为quasar build：

? Build Command: quasar build

对于 start 命令，我们需要使用 Quasar 的内置quasar dev命令：

? Start Command: quasar dev

对于 Windows 用户，由于 Amplify 和 WSL 不兼容，您可能需要按如下方式定义 start 命令：

? Start Command: quasar.cmd dev

现在 CLI 将询问我们是否要为此配置使用本地 AWS 配置文件：

? Do you want to use an AWS profile: y

我们将选择先前创建的默认配置文件：

? Please choose the profile you want to use: (Use arrow keys) 
❯ default

在 CLI 完成初始化过程后，我们需要将主机添加到项目中。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify add hosting

CLI 将要求您提供应用的托管过程。选择Hosting with Amplify Console，按进入继续：

? Select the plugin module to execute 
❯ Hosting with Amplify Console (Managed hosting with custom domains,
  Continuous deployment) 
  Amazon CloudFront and S3

然后 CLI 将询问您部署过程将如何进行；选择Manual deployment，按进入继续：

? Choose a type (Use arrow keys)
  Continuous deployment (Git-based deployments) 
❯ Manual deployment 
  Learn more

完成所有工作后，要完成此过程，需要将其发布。打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify publish

系统将询问您是否要继续发布，您可以接受。完成所有操作后，浏览器将打开默认的 Quasar Framework 主页：

它是如何工作的。。。

AWS Amplify 是面向 web 开发人员的一体化解决方案，它提供了一整套工具，从托管应用到后端开发。

我们能够快速、轻松地构建应用并将其上线，在基础设施方面完全没有遇到任何问题。

在这个配方中，我们设法创建了我们的 AWS 帐户，并创建了第一个 AWS Amplify 环境，用于本地开发，并准备在 web 上部署。此外，我们还能够创建我们的 Quasar Framework 项目，该项目将用作聊天应用，并将其部署到 AWS 基础设施中的 web 上，为该应用的未来版本做好准备。

另见

有关 AWS Amplify 的更多信息，请访问https://aws.amazon.com/amplify/ 。
有关 AWS Amplify 框架的更多信息，请访问https://docs.amplify.aws/ 。
你可以在找到更多关于类星体框架的信息 https://quasar.dev/ 。

创建第一个 GraphQLAPI

AWS Amplify 提供了一个 GraphQL API 开箱即用的可能性，包括简单的步骤和许多附加选项，包括身份验证、部署和环境。这使我们能够使用 GraphQL SDL 模式快速开发 API，AWS Amplify 将为连接构建 API、DynamoDB 实例和代理服务器。

在本教程中，我们将学习如何使用 AWS Amplify 创建 GraphQLAPI，并添加 AWS Cognito 功能进行身份验证。

准备

此配方的先决条件如下：

上一个配方的项目
Node.js 12+

所需的 Node.js 全局对象为@aws-amplify/cli。

要安装 AWS Amplify，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install -g @aws-amplify/cli

在此配方中，我们将使用创建 AWS 放大环境配方中的项目。请先完成配方中的说明。

怎么做。。。

为了开始我们的 GraphQLAPI，我们将继续在创建 AWS 放大环境配方中创建的项目。

这个配方将分为两部分：AWS Cognito 的创建和 GraphQLAPI 的创建。

创建 AWS Cognito 身份验证

为了给 API 和应用添加一层安全性，我们将使用 AWS Cognito 服务。这将提供对用户的控制和作为服务的身份验证：

要初始化 AWS Cognito 配置，需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify auth add

现在 CLI 将要求您选择用于创建 Cognito 服务的配置类型。这些是为服务选择的预先制定的规则和配置。我们将选择Default configuration：

Do you want to use default authentication and security configuration: (Use arrow keys) 
❯ Default configuration  Default configuration with Social Provider (Federation)
  Manual configuration
  I want to learn more.

之后，您需要选择用户将如何登录；当我们正在构建聊天应用时，我们将选择Email：

Warning: you will not be able to edit these selections.
How do you want users to be able to sign in: (Use arrow keys) 
  Username
❯ Email  Phone Number
  Email and Phone Number
  I want to learn more.

没有必要为 AWS Cognito 选择更高级的设置。我们可以通过选择No, I am done.跳过此步骤：

Do you want to configure advanced settings: (Use arrow keys) 
❯ No, I am done.  Yes, I want to make some additional changes.

最后，我们需要将此配置推送到云端。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify auth push

系统将询问您是否要继续–键入y，CLI 将向 AWS Cognito cloud 发布配置：

? Are you sure you want to continue: y

创建 GraphQLAPI

在这一部分中，我们将把指令分为两部分，首先创建 GraphQLSDL 模式，然后创建 GraphQLAPI。

创建 GraphQL SDL 模式

要使用 AWS Amplify 创建 GraphQL API，首先，我们需要创建一个 GraphQL SDL 模式。AWS Amplify 将使用模式为 API 生成数据库和解析器：

在src文件夹中创建一个名为chatApi.graphql的新文件，并将其打开。
创建我们的基本S3Object模式类型，这是一个用于管理 AWS S3 存储桶中文件存储的简单模型：

type S3Object {
    bucket: String!
    region: String!
    key: String!
}

然后我们将创建我们的type User。这类似于数据库模型，但附加了更多规则。此type将有一个@auth规则，该规则仅允许所有者（在本例中为User）执行create、update和delete操作。之后，我们将声明User字段：

type User
@model(subscriptions: null)
@auth(rules: [
  { allow: owner, ownerField: "id", queries: null },
  { allow: owner, ownerField: "owner", queries: null },
]) {
  id: ID!
  email: String!
  username: String!
  avatar: S3Object
  name: String
  conversations: [ConversationLink] @connection(name: "UserLinks")
  messages: [Message] @connection(name: "UserMessages", keyField:
   "authorId")
  createdAt: String
  updatedAt: String
}

我们的User将与其他用户进行对话。我们将创建一个type Conversation，为了保护此对话，我们将添加一个@auth规则，以确保只有此对话的成员才能看到用户之间交换的消息。在messages字段中，我们将用type Message创建一个@connection，在关联字段中，我们将用type ConversationLink创建一个@connection：

type Conversation
@model(
  mutations: { create: "createConversation" }
  queries: { get: "getConversation" }
  subscriptions: null
)
@auth(rules: [{ allow: owner, ownerField: "members" }]) {
  id: ID!
  messages: [Message] @connection(name: "ConversationMessages",
   sortField: "createdAt")
  associated: [ConversationLink] @connection(name: 
   "AssociatedLinks")
  name: String!
  members: [String!]!
  createdAt: String
  updatedAt: String
}

对于type Message，我们需要添加一个@authdecorator 规则，该规则只允许所有者命令它。我们需要将author字段的@connection修饰符创建为type User，将conversation字段的@connection修饰符创建为type Conversation：

type Message
@model(subscriptions: null, queries: null)
@auth(rules: [{ allow: owner, ownerField: "authorId", operations:
 [create, update, delete]}]) {
  id: ID!
  author: User @connection(name: "UserMessages", keyField: 
   "authorId")
  authorId: String
  content: String!
  conversation: Conversation! @connection(name: "ConversationMessages")
  messageConversationId: ID!
  createdAt: String
  updatedAt: String
}

现在我们将对话与type ConversationLink链接在一起。此type要求user字段在 User和type Conversation之间有@connection修饰符和@connection对话：

type ConversationLink
@model(
  mutations: { create: "createConversationLink", update: 
   "updateConversationLink" }
  queries: null
  subscriptions: null
) {
  id: ID!
  user: User! @connection(name: "UserLinks")
  conversationLinkUserId: ID
  conversation: Conversation! @connection(name: "AssociatedLinks")
  conversationLinkConversationId: ID!
  createdAt: String
  updatedAt: String
}

最后，我们需要创建一个type Subscription，在 GraphQLAPI 中有一个事件处理程序。Subscription类型监听并处理特定突变、createConversationLink和createMessage的变化，两者都会触发数据库内的事件：

type Subscription {
  onCreateConversationLink(conversationLinkUserId: ID!): 
   ConversationLink
  @aws_subscribe(mutations: ["createConversationLink"])
  onCreateMessage(messageConversationId: ID!): Message
  @aws_subscribe(mutations: ["createMessage"])
  onCreateUser: User
  @aws_subscribe(mutations: ["createUser"])
  onDeleteUser: User
  @aws_subscribe(mutations: ["deleteUser"])
  onUpdateUser: User
  @aws_subscribe(mutations: ["updateUser"])
}

使用 AWS Amplify 创建 GraphQL API

在这里，我们将使用之前配方中创建的 GraphQL 模式，使用 AWS Amplify API 创建 GraphQL API：

要初始化 AWS Amplify API 配置，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify add api

在这里，CLI 将询问您要创建哪种类型的 API。我们将选择GraphQL：

? Please select from one of the below mentioned services: (Use arrow 
  keys) 
❯ GraphQL  REST

现在 CLI 将询问 API 名称（您可以选择）：

? Provide API name: chatapp

这里我们将选择 API 将使用的身份验证方法。由于我们将使用 AWS Cognito，我们需要选择Amazon Cognito User Pool选项：

? Choose the default authorization type for the API: (Use arrow
  keys) 
  API key
❯ Amazon Cognito User Pool  IAM
  OpenID Connect

然后 CLI 将询问您是否要在 API 上配置更多设置；我们将选择No, I am done.选项：

? Do you want to configure advanced settings for the GraphQL API:
  (Use arrow keys) 
❯ No, I am done.  Yes, I want to make some additional changes.

现在我们将被问到是否有一个带注释的 GraphQL 模式；正如我们之前所写的，我们需要键入y：

? Do you have an annotated GraphQL schema?: y

在这里，我们需要键入刚刚创建的文件的路径，./src/chatApi.graphql：

? Provide your schema file path: ./src/chatApi.graphql

完成后，我们需要将配置推送到 AWS 放大。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify push

当被问及是否要继续时，请键入y：

? Are you sure you want to continue?: y

CLI 将询问您是否要为新创建的 GraphQL API 生成代码；再次输入y：

? Do you want to generate code for your newly created GraphQL API: y

在这里，您可以选择希望 CLI 使用哪种语言创建通信文件以在项目中使用。我们会选择javascript，但您可以选择最适合您需要的：

? Choose the code generation language target: (Use arrow keys) 
❯ javascript
  typescript
  flow

CLI 将询问将生成的文件放置在何处，我们将使用默认值：

? Enter the file name pattern of graphql queries, mutation and
  subscriptions: (src/graphql/***/**.js)

现在 CLI 将询问 GraphQL 操作的生成。在我们创建第一个 GraphQL API 时，我们将选择y，因此 CLI 将为我们创建所有文件：

? Do you want to generate/update all possible GraphQL operations - 
  queries, mutations and subscriptions: y

最后，我们可以在文件中定义模式的最大深度，我们将使用默认值2：

? Enter maximum statement depth [increase from default if your 
  schema is deeply nested]: (2)

完成所有工作后，我们需要将配置发布到 AWS Amplify。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify publish

它是如何工作的。。。

在使用 AWS Amplify 创建 GraphQL API 的过程中，我们需要一个用于生成数据库和端点的预构建模式。此模式基于 GraphQL SDL 语言。Amplify 为 SDL 添加了更多的装饰器，因此我们可以在 API 的开发中拥有更广泛的可能性。

同时，我们需要创建一个 AWS Cognito 用户池，以容纳将在应用上注册的用户。这样做是为了在我们的应用之外管理和维护身份验证层，并将其作为一项服务使用，从而使我们有可能拥有更多的功能，包括双因素身份验证、必填字段和恢复模式。

最后，在完成所有工作之后，我们将 API 发布在 AWS Amplify 上，并准备好进行开发，其中包含一个可以用作开发环境的 URL。

另见

有关 GraphQL SDL 的更多信息，请访问https://graphql.org/learn/schema/ 。
有关 AWS Amplify API 的更多信息，请访问https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js 。
有关 AWS Amplify 认证的更多信息，请访问https://docs.amplify.aws/lib/auth/getting-started/q/platform/js 。

将 GraphQL 客户端添加到应用

Apollo 客户端是目前 JavaScript 生态系统中最好的 GraphQL 客户端实现。它背后有一个庞大的社区，并有一家大公司支持它。

我们的 AWS Amplify GraphQL API 实现在后端使用 Apollo 服务器，因此 Apollo 客户端的使用将是一个完美的匹配。AWS AppSync 也将 Apollo 的实现用作客户端，因此我们仍然将 Apollo 用作客户端，但不是直接使用。

在本教程中，我们将学习如何将 GraphQL 客户端添加到应用中，以及如何连接到 AWS Amplify GraphQL 服务器以执行查询。

准备

此配方的先决条件如下：

上一个配方的项目
Node.js 12+

所需的 Node.js 全局对象如下：

@aws-amplify/cli
@quasar/cli

在这个配方中，我们将使用中创建第一个 GraphQLAPI配方的项目。在遵循本配方之前，请遵循之前配方中的步骤。

怎么做。。。

我们将使用 Amplify 客户端将 GraphQL 客户端添加到我们的应用中。按照以下步骤创建 GraphQL 驱动程序：

要安装使用 GraphQL 客户端所需的软件包，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows）并执行以下命令：

> npm install --save graphql aws-amplify graphql-tag aws-appsync

在boot文件夹中创建一个名为amplify.js的新文件，并将其打开。
在这个文件中，我们将导入 AWS Amplify CLI 在配置过程中为我们创建的aws-amplify包和aws-exports.js文件。我们将使用现有的配置配置 Amplify。为了让 Quasar 启动文件工作，我们需要导出一个default空函数：

import Amplify from 'aws-amplify';

import AwsExports from '../aws-exports';

Amplify.configure(AwsExports);

export default () => {};

在root文件夹的quasar.conf.js文件中，我们需要向webpack绑定器添加新规则。为此，请找到extendWebpack功能。在函数的第一行为绑定器创建两个新规则后，第一个规则将添加graphql-loader网页包加载器，第二个规则将允许绑定器理解.mjs文件：

// The rest of the quasar.conf.js...

extendWebpack (cfg) {
  //New rules that need to be added
  cfg.module.rules.push({
    test: /\.(graphql|gql)$/,
    exclude: /node_modules/,
    loader: 'graphql-tag/loader',
  });

  cfg.module.rules.push({
    test: /\.mjs$/,
    include: /node_modules/,
    type: 'javascript/auto',
  });

  // Maintain these rules
  cfg.module.rules.push({
    enforce: 'pre',
    test: /\.(js|vue)$/,
    loader: 'eslint-loader',
    exclude: /node_modules/,
    options: {
      formatter: 
       require('eslint').CLIEngine.getFormatter('stylish'),
    },
  });

  cfg.resolve.alias = {
    ...cfg.resolve.alias,
    driver: path.resolve(__dirname, './src/driver'),
  };
},

// The rest of the quasar.conf.js...

现在，在src/driver文件夹中创建一个名为graphql.js的新文件，并将其打开。
在这个文件中，我们需要从aws-appsync包导入AWSAppSyncClient，从aws-amplify包导入Auth，从src文件夹中的aws-exports.js文件导入AwsExports。然后我们需要用aws-exports的配置实例化AWSAppSyncClient，并导出客户端的这个实例化：

import AWSAppSyncClient from 'aws-appsync';
import { Auth } from 'aws-amplify';
import AwsExports from '../aws-exports';

export default new AWSAppSyncClient({
  url: AwsExports.aws_appsync_graphqlEndpoint,
  region: AwsExports.aws_appsync_region,
  auth: {
    type: AwsExports.aws_appsync_authenticationType,
    jwtToken: async () => (await 
      Auth.currentSession()).idToken.jwtToken,
  },
});

在root文件夹中的quasar.conf.js文件中，我们需要将新创建的amplify.js文件（位于boot文件夹中）添加到引导序列中。为此，找到boot数组，并在末尾添加boot文件夹中文件的方向作为字符串，不带扩展名。在我们的情况下，这将是'amplify'：

// The rest of the quasar.conf.js...

boot: [
 'axios',
 'amplify'
],

// The rest of the quasar.conf.js...

它是如何工作的。。。

我们在全局范围内将aws-amplify包添加到我们的应用中，并通过新graphql.js文件中的导出条目使其可用。这使得在应用中使用AWSAmplifyAppSync成为可能。

使用 Quasar Framework 引导过程，我们能够在 Vue 应用开始在屏幕上渲染之前实例化 Amplify。

另见

有关 AWS Amplify AppSync 的更多信息，请访问https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js 。
您可以在找到有关 Quasar Framework 启动文件的更多信息 https://quasar.dev/quasar-cli/developing-ssr/writing-universal-code#Boot-文件。

为应用创建 AWS 放大驱动程序

要与 AWS Amplify services 通信，我们需要使用他们的 SDK。这个过程是重复的，可以合并到我们将要使用的每个 Amplify 服务的驱动程序中。

在本食谱中，我们将学习如何创建通信驱动程序，以及如何使用 AWS Amplify 进行创建。

准备

此配方的先决条件如下：

上一个配方的项目
Node.js 12+

所需的 Node.js 全局对象如下：

@aws-amplify/cli
@quasar/cli

在此配方中，我们将使用中的项目，将 GraphQL 客户端添加到您的应用配方中。请先完成配方中的说明。

怎么做。。。

在本配方中，我们将其分为三部分：第一部分用于 AWS 存储驱动程序，第二部分用于 Amplify Auth 驱动程序，最后，我们将看到 Amplify AppSync 实例的创建。

创建 AWS 放大存储驱动程序

要创建 AWS Amplify 存储驱动程序，我们首先需要创建 AWS Amplify 存储基础结构并在我们的环境中进行设置，然后需要创建 AWS Amplify 存储 SDK 和应用之间的通信驱动程序。

添加 AWS 放大存储

在本部分中，我们将向 Amplify services 列表中添加 AWS S3 功能。这是我们在 AWS S3 云基础设施上保存文件所必需的：

首先，我们需要将 AWS 存储添加到项目中。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹并执行以下命令：

> amplify add storage

现在我们需要选择要上传的内容。我们需要选择Content (Images, audio, video, etc.)：

? Please select from one of the below mentioned services: (Use arrow 
  keys) 
❯ Content (Images, audio, video, etc.)  NoSQL Database

我们需要为资源添加一个名称。我们称之为bucket：

? Please provide a friendly name for your resource that will be used 
  to label this category in the project: bucket

现在我们需要提供一个 AWS S3 bucket 名称。我们称之为chatappbucket：

? Please provide bucket name: chatappbucket

然后我们需要选择谁可以操纵 bucket 文件。由于申请仅基于授权，我们需要选择Auth users only：

? Who should have access: (Use arrow keys) 
❯ Auth users only  Auth and guest users

现在，您需要选择用户在 bucket 中的访问级别：

? What kind of access do you want for Authenticated users? 
  create/update
  read
❯ delete

当被问及如何创建自定义 Lambda 触发器时，请选择n：

? Do you want to add a Lambda Trigger for you S3 Bucket: n

最后，我们需要将更改推送到云上。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify push

完成所有工作后，我们需要将配置发布到 AWS Amplify。为此，您需要打开终端（macOS 或 Linux）或命令提示符/PowerShell（Windows），输入项目文件夹，然后执行以下命令：

> amplify publish

创建放大存储驱动程序

在这一部分中，我们将创建与放大存储器通信的驱动程序。此驱动程序将在我们的应用中处理文件上载：

在src/driver文件夹中创建一个名为bucket.js的新文件并打开它。
从aws-amplify包导入Storage类，从quasar导入uid函数，从AwsExports导入：

import { Storage } from 'aws-amplify';
import { uid } from 'quasar';
import AwsExports from '../aws-exports';

创建一个名为uploadFile的异步函数，该函数接收三个参数：file、name和type。name参数的默认值为uid()，而type参数的默认值为'img/png'。在这个函数中，我们将调用Storage.put函数，传递name和file作为参数，作为第三个参数，我们将传递一个 JavaScript 对象，其中contentType属性定义为接收的type，而accept属性定义为'**/**'。上传完成后，我们将返回一个属性为bucket、region和uploadedFiledestructed 的 JavaScript 对象：

export async function uploadFile(file, name = uid(), type = 'img/png') {
  try {
    const uploadedFile = await Storage.put(name, file, {
      contentType: type,
      accept: '*/*',
    });

    return {
      ...uploadedFile,
      bucket: AwsConfig.aws_user_files_s3_bucket,
      region: AwsConfig.aws_user_files_s3_bucket_region,
    };
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为getFile的异步函数，该函数接收默认值为空字符串的参数name。在函数内部，我们将返回Storage.get，将name参数和选项设置传递到public级别：

export async function getFile(name = '') {
  try {
    return await Storage.get(name, { level: 'public' });
  } catch (err) {
    return Promise.reject(err);
  }
}

最后，导出一个默认 JavaScript 对象，并添加创建的函数uploadFile和getFile作为属性：

export default {
  uploadFile,
  getFile,
};

创建放大验证驱动程序

现在我们将创建身份验证驱动程序。此驱动程序负责处理应用上的所有身份验证请求，并获取用户信息：

在src/driver文件夹中创建一个名为auth.js的新文件并打开它。
在新创建的文件中，从aws-amplify包中导入Auth类：

import { Auth } from 'aws-amplify';

创建一个名为signIn的新异步函数。接收email和password作为参数，函数返回Auth.signIn函数，传递email和password作为参数：

export async function signIn(email = '', password = '') {
  try {
    return Auth.signIn({
      username: email,
      password,
    });
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为signUp的新异步函数，该函数将接收email和password作为参数。该函数将返回Auth.signUp函数，并将具有以下属性的 JavaScript 对象作为参数传递：username、password、attributes和validationData。

username属性将是它作为参数接收的email值。

password属性将是它作为参数接收的password值。

attributes属性将是具有email属性的 JavaScript 对象，该属性将作为参数接收：

export async function signUp(email = '', password = '') {
  try {
    return Auth.signUp({
      username: email,
      password: `${password}`,
      attributes: {
        email,
      },
      validationData: [],
    });
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为validateUser的新异步函数，该函数将接收username和code作为参数。函数等待Auth.confirmSignUp函数的响应，将username和code作为参数传递给该函数，完成后返回true：

export async function validateUser(username = '', code = '') {
  try {
    await Auth.confirmSignUp(username, `${code}`);

    return Promise.resolve(true);
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为resendValidationCode的新异步函数，该函数将接收username作为参数。函数返回Auth.resendSignUp函数，将username作为参数传递：

export async function resendValidationCode(username = '') {
  try {
    return Auth.resendSignUp(username);
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为signOut的新异步函数，该函数返回Auth.signOut函数：

export async function signOut() {
  try {
    return Auth.signOut();
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为changePassword的新异步函数，该函数将接收oldPassword和newPassword作为参数。函数等待获取当前已认证的用户，并返回Auth.changePassword函数，将获取的user、oldPassword和newPassword作为参数传递：

export async function changePassword(oldPassword = '', newPassword = '') {
  try {
    const user = await Auth.currentAuthenticatedUser();
    return Auth.changePassword(user, `${oldPassword}`, `${newPassword}`);
  } catch (err) {
    return Promise.reject(err);
  }
}

创建一个名为getCurrentAuthUser的新异步函数；函数将获取当前经过身份验证的用户，并返回一个 JavaScript 对象，其属性为id、email和username：

export async function getCurrentAuthUser() {
  try {
    const user = await Auth.currentAuthenticatedUser();

    return Promise.resolve({
      id: user.username,
      email: user.signInUserSession.idToken.payload.email,
      username: user.username,
    });
  } catch (err) {
    return Promise.reject(err);
  }
}

创建 Amplify AppSync 实例

要在经过身份验证时与 AWS Amplify API 通信，我们需要创建一个新的 AWS Amplify AppSync API 实例，该实例包含用户身份验证信息：

在src/driver文件夹中创建一个名为appsync.js的新文件并打开它。
在新创建的文件中，从aws-amplify包导入Auth和API，从@aws-amplify/api包导入GRAPHQL_AUTH_MODE枚举，AWS 配置：

import { Auth, API } from 'aws-amplify';
import { GRAPHQL_AUTH_MODE } from '@aws-amplify/api';
import AwsExports from '../aws-exports';

通过执行API.configure函数，将属性为url、region和auth的 JavaScript 对象作为参数传递，从aws-amplify包中配置 API。

在url属性中，传递 GraphQL 端点 URL 的配置。

在region属性中，传递当前正在使用的 AWS 区域的配置。

在auth属性中，我们需要传递一个具有两个属性type和jwtToken的 JavaScript 对象。

我们需要将type属性设置为GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS。

在jwtToken中，我们将传递一个异步函数，该函数将为当前登录的用户返回令牌：

API.configure({
  url: awsconfig.aws_appsync_graphqlEndpoint,
  region: awsconfig.aws_appsync_region,
  auth: {
    type: GRAPHQL_AUTH_MODE.AMAZON_COGNITO_USER_POOLS,
    jwtToken: async () => (await Auth.currentSession()).getIdToken().getJwtToken(),
  },
});

最后，我们将API导出为一个名为AuthAPI的常量：

export const AuthAPI = API;

它是如何工作的。。。

在本教程中，我们学习了如何将应用的责任划分为驱动程序，这些驱动程序可以在多个区域中重用，而无需重写整个代码。通过这个过程，我们能够为 Amplify 存储创建一个驱动程序，该驱动程序可以异步发送文件，并且这些文件保存在 AWS S3 服务器上的 bucket 中。

在我们关于 Auth 驱动程序的工作中，我们能够创建一个驱动程序，该驱动程序可以管理 Amplify Authentication SDK，并在需要时提供信息，并包装特殊功能，以便更轻松地在应用中执行任务。

最后，在 Amplify AppSync API 中，我们设法用所需的所有身份验证头实例化 API 连接器，以便应用可以毫无问题地执行，并且用户可以在请求时访问所有信息。

另见

有关 AWS 放大存储的更多信息，请访问https://docs.amplify.aws/lib/storage/getting-started/q/platform/js 。
有关 AWS Amplify Auth 的更多信息，请访问https://docs.amplify.aws/lib/auth/getting-started/q/platform/js 。
有关 AWS Amplify AppSync 的更多信息，请访问https://docs.amplify.aws/lib/graphqlapi/getting-started/q/platform/js 。**

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/12346.html

数据知识

系统公告

开发文档

vue查看更多书籍

《使用 GraphQL 构建 VueJS 应用》

vue 三、设置我们的聊天应用——AWS Amplify 环境和 GraphQL

三、设置我们的聊天应用——AWS Amplify 环境和 GraphQL

技术要求

创建 AWS 放大环境

准备

怎么做。。。

创建 AWS 帐户

配置 AWS 放大

创建您的 Quasar 项目

初始化 AWS 放大项目

它是如何工作的。。。

另见

创建第一个 GraphQLAPI

准备

怎么做。。。

创建 AWS Cognito 身份验证

创建 GraphQLAPI

创建 GraphQL SDL 模式

使用 AWS Amplify 创建 GraphQL API

它是如何工作的。。。

另见

将 GraphQL 客户端添加到应用

准备

怎么做。。。

它是如何工作的。。。

另见

为应用创建 AWS 放大驱动程序

准备

怎么做。。。

创建 AWS 放大存储驱动程序

添加 AWS 放大存储

创建放大存储驱动程序

创建放大验证驱动程序

创建 Amplify AppSync 实例

它是如何工作的。。。

另见

留言

联系客服

vue 查看更多书籍