使用 Amplify 用戶端建置用戶端應用程式 - AWS AppSync

本文為英文版的機器翻譯版本，如內容有任何歧義或不一致之處，概以英文版為準。

使用 Amplify 用戶端建置用戶端應用程式

您可以使用API任何 AWS AppSync GraphQL 用戶端連線至 GraphQL，但我們強烈建議您使用 Amplify v6 用戶端。Amplify 不僅SDKs會自動產生 GraphQL 的強式用戶端API，也支援用戶端應用程式中的即時資料和增強型 GraphQL 查詢功能。對於 Web 應用程式，Amplify JavaScript可以產生用戶端。針對跨平台或行動環境，Amplify 可滿足 Android、iOS 和 React Native 的需求。若要深入了解這些平台的用戶端程式碼產生，請參閱 Amplify 文件 。以下是使用 JavaScript React 應用程式開始旅程的指南：

注意

您需要先安裝和設定 npm 和 AmazonCLI，才能開始使用。如果您使用的是 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 Library 和您的組態以設定 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 ./