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

本文属于机器翻译版本。若本译文内容与英语原文存在差异，则一律以英文原文为准。

构建客户端应用程序

你可以使用任何 Amazon AppSync GraphQL 客户端连接到你的 GraphQL API，但我们强烈建议使用 Amplify 客户端。Amplify 不仅可以为您的 GraphQL API 自动生成强类型客户端软件开发工具包，而且还支持客户端应用程序中的实时数据和增强的 GraphQL 查询功能。对于网络应用程序，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. 你现在可以生成适用于安卓、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 ./