AWS amplify로 GraphQL 추가하기

AWS amplify로 어플리케이션 배포하기 에서 기본적인 next 셋업을 하고, amplify로 graphQL api를 추가해보자.

 

amplify add api

amplify/backend/backend-config.json에 "api"가 추가되고 amplify/backend/api 폴더와 파일들이 자동으로 생성된다.

자동으로 생성된 파일들

 

기본으로 제공되는 스키마는 다음과 같다.

type Todo @model {
  id: ID!
  name: String!
  description: String
}

 

GraphQL에서 사용할 모델의 스키마로 @model로 정의한 SDL(Schema Definition Language)을 GraqhQL Transform 해준다. 뒷단에서는 DynamoDB와 AppSync가 만들어져 실행된다. 나중에 codegen을 통해 관련 코드를 생성해보면 CRUD까지 가능한 것을 확인할 수 있다. !는 필수 필드를 의미한다. 

 

Todo 모델은 간단하지만 보통 모델링을 한다 하면 여러 테이블이 나오고, 각 테이블은 primary key를 가지고 서로 참조한다. GraphQL 상에서 이런 연관관계가 없다면 매번 api로 조회를 해야 한다. 이런 연관관계는 connnection을 통해 맺어줄 수 있다.

type Todo @model {
  id: ID!
  userId: ID!
  user: User @connection(fields: ["userId"])
  name: String!
  description: String
}

type User @model {
  id: ID!
  name: String!
  address: String
}

 

이렇게 connection으로 정의를 해주면 Todo 조회하는 api에서 User까지 resolve 할 수 있게 된다. connnection 옵션으로 name을 지정해서 User 쪽에도 추가하면 양방향 맵핑도 가능하다.

 

여기에선 간단하게 Todo 모델만 만들어 본다. 그래도 aws에 AppSync, DynamoDB를 생성하고 테스트하다 보면 시행착오를 겪기 마련이다. amplify를 사용하면 aws에 프로비저닝 하기 전에 먼저 로컬에서 테스트를 해볼 수 있다.

 

 

amplify mock api

.graphqlconfig.yml에 설정한 값들이 저장되고, 이렇게 지정한 위치에 GraphQL query, mutation, subscription 코드가 생성된다. 뿐만 아니라 graphiql-explorer으로 구현된 웹에서 손쉽게 테스트 환경이 구축된다.

 

먼저 mutation으로 { name: "first name", description: "first descrpition" } Todo를 생성하고, query로 list, get 요청을 실행한 화면이다. 요청한 필드에 맞게 저장된 내용을 잘 resolve 하고 조회해오는 것을 확인할 수 있다.

 

이제 생성된 파일을 가지고 코드로 구현해 볼 차례이다. 먼저 npm으로 aws-amplify부터 설치한다.

npm install aws-amplify 

 

먼저 _app.ts에서 amplify 환경설정을 해준다.

import Amplify from 'aws-amplify'
import awsconfig from '../src/aws-exports'

Amplify.configure(awsconfig);

 

저장할 때는 위에서 자동으로 생성한 mutation을 사용한다.

import API, { graphqlOperation } from '@aws-amplify/api'
import { createTodo } from '../src/graphql/mutations'

const addTodo = async ({ name, description }: ITodo) => {
  await API.graphql(graphqlOperation(createTodo, { input: { name, description }}))
}

 

조회할 때도 마찬가지로 위에서 자동으로 생성한 query를 사용한다.

import API, { graphqlOperation } from '@aws-amplify/api'
import { listTodos } from '../../src/graphql/queries'

const fetchData = async() => {
  const todos = await API.graphql(graphqlOperation(listTodos))
}

 

amplify mock api 기능을 사용해서 이 모든 기능을 이렇게 로컬에서 테스트할 수 있다.

모든 게 잘 돌아가면 이제 aws로 프로비저닝 한다.

 

 

amplify push

push 하면 cloudformation으로 변환되어 aws상에 프로비저닝 된다.

AppSync API가 생성되고 Data Source를 확인해보면 DynamoDB가 연결되어 있다.