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

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

注意

在开始CLI之前，你需要同时安装和配置 npm 和 Amazon。如果您使用的是 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 ./