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

# 使用 Amplify 客户端构建客户端应用程序
<a name="building-a-client-app"></a>

你可以使用任何 AWS AppSync GraphQL 客户端连接到你的 GraphQL API，但我们强烈建议使用 Amplify v6 客户端。Amplify 不仅可以 SDKs为您的 GraphQL API 自动生成强类型客户端，而且还支持客户端应用程序中的实时数据和增强的 GraphQL 查询功能。对于网络应用程序，Amplify 可以生成客户端。 JavaScript对于那些针对跨平台或移动环境的用户，Amplify 可以满足 Android、iOS 和 React Native 要求。要深入研究这些平台的客户端代码生成功能，请参阅 Amplify [文档](https://docs.amplify.aws/cli/graphql/client-code-generation/)。以下是开启 JavaScript React 应用程序之旅的指南：

**注意**  
在开始之前，您需要安装并配置 [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 和 [Amazon CLI](https://aws.amazon.com/cli/)。如果您使用的是 Amplify v6 客户端，请[按照本指南进行操作](https://docs.amplify.aws/react/build-a-backend/graphqlapi/connect-to-api/#configure-the-default-authorization-mode)。

开始使用：

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

   ```
   npm install aws-amplify
   ```

1. 下载配置文件并将其放在项目文件夹中。您的配置文件通常会包含一个定义了某些设置（端点、区域、授权模式等）的 `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;
   ```

1. 在代码中，导入 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: ''
       }
     }
   });
   ```

1. 通过使用 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
   ```

1. 你现在可以生成适用于安卓、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 ./
   ```