들어가기

React app에서 미리 생성해둔 AWS AppSync GraphQL을 사용하는 방법에 대해서 포스팅.

How to use

라이브러리 설치

npm install -g @aws-amplify/cli
npm i aws-amplify

Amplify 설정

본인이 만들어둔 AWS AppSync GraphQL에 들어가면, API Key를 확인할 수 있다. 명령어도 그대로 나와 있으니 복사해서 실행한다.

amplify add codegen 명령어를 실행하면 src 아래에 graphql 폴더가 생성된 것을 확인할 수 있다.

amplify init
amplify add codegen --apiId my-api-id
amplify push

API 사용

aws-amplify 라이브러리에 있는 API 활용해서 실행.

만약 variables에 필터가 들어간다면, variables: { filter: { userId: { eq: userId } } } 형태로 넣어주면 된다

import { API } from 'aws-amplify';
import * as queries from '../graphql/queries';
import * as mutations from '../graphql/mutations';

const getList = async (templateId) => {
  let result = [];
  try {
    const data = await API.graphql({
      query: queries.listSaveCapabilities, // queries.queryName 입력
      variables: { templateId }, // 변수 입력.
    });
    result = data.data.listSaveCapabilities.items;
  } catch (e) {
    console.log('err', e);
  }
  return result;
};

만약 AppSync GraphQL 내용이 업데이트 됐다면, 기존 API를 삭제하고 다시 추가하면 된다.
아래의 명령어를 사용한다.

amplify codegen remove
amplify add codegen --apiId my-api-id
amplify push

참조
https://m.blog.naver.com/demonic3540/221642721907
https://docs.amplify.aws/cli-legacy/graphql-transformer/codegen/
https://towardsdatascience.com/creating-react-graphql-serverless-web-application-using-aws-amplify-40e56f25796b