使用 Amplify 客户端构建客户端应用程序 - Amazon AppSync GraphQL
Amazon Web Services 文档中描述的 Amazon Web Services 服务或功能可能因区域而异。要查看适用于中国区域的差异，请参阅 中国的 Amazon Web Services 服务入门 (PDF)。

使用 Amplify 客户端构建客户端应用程序

您可以使用任何 GraphQL 客户端连接到 Amazon AppSync GraphQL API，但我们强烈建议使用 Amplify v6 客户端。Amplify 不仅为 GraphQL API 自动生成强类型客户端 SDK，而且还在客户端应用程序中提供实时数据支持和增强的 GraphQL 查询功能。对于 Web 应用程序，Amplify 可以生成 JavaScript 客户端。对于那些针对跨平台或移动环境的用户，Amplify 可以满足 Android、iOS 和 React Native 要求。要深入研究这些平台的客户端代码生成功能，请参阅 Amplify 文档。以下是您开启 JavaScript React 应用程序之旅的指南：

注意

在开始之前，您需要安装并配置 npm 和 Amazon CLI。如果您使用的是 Amplify v6 客户端，请按照本指南进行操作。

开始使用：

  1. 在本地计算机上，导航到您的项目的目录。使用以下命令安装 Amplify 库：

    npm install aws-amplify

  2. 下载配置文件并将其放在项目文件夹中。您的配置文件通常会包含一个定义了某些设置（端点、区域、授权模式等）的 config 变量。例如，可能如下所示：

    const config =  {
    API: {
        GraphQL: {
          endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
          region: 'us-west-2',
          defaultAuthMode: 'apiKey',
          apiKey: ''
        }
    }
};

export default config;

  3. 在代码中，导入 Amplify 库和您的配置以设置 Amplify：

    import { Amplify } from 'aws-amplify';
import config from './aws-exports.js';

Amplify.configure(config);

    或者，使用 API 配置中的代码片段直接设置 Amplify：

    import { Amplify } from 'aws-amplify';

Amplify.configure({
  API: {
    GraphQL: {
      endpoint: 'https://abcdefghijklmnopqrstuvwxyz.appsync-api.us-west-2.amazonaws.com/graphql',
      region: 'us-west-2',
      defaultAuthMode: 'apiKey',
      apiKey: ''
    }
  }
});

  4. 通过使用 Amplify 工具链，您可以选择根据您的架构自动生成操作，从而省去手动编写脚本的麻烦。在应用程序的根目录中，使用以下 CLI 命令：

    npx @aws-amplify/cli codegen add --apiId <id goes here> --region <region goes here>

    这将下载您的 API 架构，默认情况下会生成客户端帮助程序代码并放入 src/graphql 文件夹。每次部署 API 后，您可以重新运行以下命令来生成更新的 GraphQL 语句和类型：

    npx @aws-amplify/cli codegen

  5. 您现在可为 Android、Swift、Flutter 和 JavaScript DataStore 生成模型。使用以下命令下载架构：

    aws appsync get-introspection-schema --api-id <id goes here> --region <region goes here> --format SDL schema.graphql

    然后从应用程序的根目录运行以下命令：

    npx @aws-amplify/cli codegen models \
--model-schema schema.graphql \
--target [android|ios|flutter|javascript|typescript] \
--output-dir ./