使用 Amplify 客户端构建客户端应用程序 - AWS AppSync

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

使用 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 ./