2019-10-03 graphql project

[getElementsByName]

Server-side

설계 전 참고

• thinking-in-graphs
  • business logic, persistence 레이어 분리
• apollo-server/schema/#design-for-client-needs
  • 클라이언트 관점에서의 스키마 설계

module 구조

• resolver와 schema 파일을 관심사 별로 분리하고 모음
• 개발 방식(아래 설명)에 따라 모듈 export와 merge 방식이 다름

구조 / 개발 방법론

• code-first, schema-first 방식에 따라 설계 방식과 개발 방법이 많이 다르게 때문에 사전에 선택하고 구조를 세팅해야 함
• default 방식으로 schema-first를 선택하고 추후 code-first 전환에 대한 명확한 니즈가 있을 경우 전환하는 것을 권장

code-first

• host 언어로 grpahql 스키마를 정의하는 것을 말함

• 참고) ORM 관련

  • RDB를 nodejs에서 사용할 때 쓰는 ORM 라이브러리 (java의 hibernate)
  • sequelize
  • TypeORM
  • ORM은 SQL에서의 code-first 접근 방식
    • host 언어 위주로 개발하기 때문에 개발 생산성이 좋고 스키마 표현이 파편화 되지 않음
    • SQL에 대해 자세히 알지 못하면 잘못 개발하기 쉬움

• 대표 프레임워크

  • typegraphql
  • nexus
    • nexus/example

schema-first (SDL-first Schema Definition Language)

• graphql schema 언어로 스키마를 정의
• graphql 기본 철학에 맞는 구조
• graphql 스키마를 host언어에서 재정의하여 구현 (스키마 표현 중복)
  • code-generator 와 같은 도구로 host 언어의 코드를 생성하여 피로도를 줄임

Client-side

• Apollo client로 개발
  • caching 및 정규화
  • SSR
• graphql loader 적용
  • webpack loader 로 적용 하는 경우: https://www.apollographql.com/docs/react/integrations/webpack/
  • babel plugin 로 적용 하는 경우:: https://github.com/detrohutt/babel-plugin-import-graphql

[getElementsByName]

그외

Server side 최적화

• N+1 쿼리 문제: DataLoader
  • DataSource
    • RESTDataSource

typescript type 정의

• graphql-code-generator 를 활용하여 code 생성

client side에서의 fragment matcher가 필요한 이유

• https://www.apollographql.com/docs/react/data/fragments/#fragments-on-unions-and-interfaces
• client에서는 스키마 정보를 모르기 때문에 fragment를 사용하면 추상 타입에 대한 처리가 불가능
• client에서 어떤 타입이 추상타입에서 온 것인지 알고 있어야 한다

vscode 확장 도구

• vscode - apollographql
  • apollo-config

[getElementsByName]

Shopify / graphql-design-tutorial

• https://github.com/Shopify/graphql-design-tutorial/blob/master/TUTORIAL.md
• https://github.com/Shopify/graphql-design-tutorial/blob/master/lang/TUTORIAL_KOREAN.md