클라이언트 애플리케이션 빌드

모든 AWS AppSync GraphQL 클라이언트를 사용하여 GraphQL API에 연결할 수 있지만 Amplify 클라이언트를 사용하는 것이 좋습니다. Amplify는 GraphQL API를 위한 강력한 형식의 클라이언트 SDK를 자동 생성할 뿐만 아니라 클라이언트 애플리케이션에서 실시간 데이터 및 향상된 GraphQL 쿼리 기능을 지원합니다. 웹 애플리케이션의 경우 Amplify는 클라이언트를 JavaScript 생성할 수 있습니다. 교차 플랫폼 또는 모바일 환경을 대상으로 하는 애플리케이션을 위해 Amplify는 Android, iOS 및 React Native를 지원합니다. 이러한 플랫폼의 클라이언트 코드 생성에 대해 더 알아보려면 Amplify 설명서를 참조하세요. 다음은 React 애플리케이션으로 여정을 시작하는 데 도움이 되는 가이드입니다. JavaScript

참고

시작하기 전에 npm과 Amazon CLI를 모두 설치하고 구성해야 합니다. 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. 이제 안드로이드, 스위프트, 플러터 등을 위한 모델을 생성할 수 있습니다. 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 ./