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

您可以API使用任何 AWS AppSync GraphQL 用戶端連線到 GraphQL，但我們強烈建議您使用 Amplify v6 用戶端。Amplify 不僅為 GraphQL 自動產生強型別SDKs用戶端，API還可支援用戶端應用程式中的即時資料和增強的 GraphQL 查詢功能。對於 Web 應用程序，Amplify 可以生成一個 JavaScript客戶端。對於那些針對跨平台或移動環境，Amplify 迎合 Android，iOS 和反應本地。若要深入研究這些平台的用戶端程式碼產生，請參閱 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. 您現在可以為 Android 生成模型, 斯威夫特, 撲, 和 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 ./