[React Native] GraphQL & Apollo & Code Generator 사용법

1. 아폴로란?

https://www.apollographql.com/docs/react/

- Apollo Client는 JavaScript 앱을 위한 상태 관리 라이브러리

- GraphQL 쿼리를 작성하기 만하면 Apollo Client가 데이터를 요청하고 캐싱하고 UI를 업데이트한다.

- 리덕스와 빠이빠이 할 수 있다!

 

2. 설치

npm install apollo-boost @apollo/react-hooks graphql react-apollo

• apollo-boost: Package containing everything you need to set up Apollo Client
• @apollo/react-hooks: React hooks based view layer integration
• graphql: Also parses your GraphQL queries

 

 

 

3. 서버와 연동

- code generator

https://github.com/dotansimha/graphql-code-generator

dotansimha/graphql-code-generator

 

$ yarn add graphql
$ yarn add -D @graphql-codegen/cli
$ yarn graphql-codegen init

init을 하면 codegen.yml 파일이 생긴다.

document는 클라이언트에서 필요하지 않아서 그 줄만 삭제하고

overwrite: true
schema: 'http://localhost:4000'
generates:
  src/generated/graphql.tsx:
    plugins:
      - 'typescript'
      - 'typescript-operations'
      - 'typescript-react-apollo'
  ./graphql.schema.json:
    plugins:
      - 'introspection'

codegen.yml

 

 

 

 

이 상태에서 

yarn codegen // 위에서 직접 설정한 명령어

실행하면 src/generated 위치에 graphql.tsx 파일이 생긴다. GQL 서버의 스키마를 바탕으로 타입화 시켜준다.