codegen 및 Typescript를 사용한 Graphql 개발을 위한 스키마 첫 번째 워크플로

소개

엄격한 형식의 스키마는 Graphql 사용의 큰 이점 중 하나입니다. 이 스키마는 백엔드와 프론트엔드 간의 계약 역할을 합니다. Graphql을 백엔드 API 레이어로 사용하는 제품을 작업할 때 팀 구성원 간의 2가지 유형의 작업 방식을 관찰했습니다.

백엔드 작업과 프런트엔드 작업을 동일한 개발자가 소유합니다. 이 시나리오에서 graphql 스키마는 프런트 엔드 코드 및 요구 사항과 함께 발전합니다.

동일하거나 다른 팀의 여러 개발자(2명 이상)가 프론트엔드 및 백엔드의 서로 다른 부분에서 공동 작업함

이 글은 앱 또는 기능의 다른 부분에서 작업하는 개발자가 다음 작업을 수행해야 하는 두 번째 지점을 해결하는 것을 목표로 합니다.

UI 요구 사항 이해

UI의 데이터 요구 사항 이해

프런트엔드와 Graphql 코드 간의 데이터 계약 역할을 하는 Graphql 스키마를 정의합니다.

#1 및/또는 #2에 변경 사항이 있는 경우 #3을 반복합니다.

이러한 작업 방식은 새로운 것이 아닙니다. API가 REST(Swagger 사양을 통해) 또는 gRPC(ProtoBuf 정의를 통해)를 말하는 경우에도 동일하게 적용될 수 있습니다. Graphql이 선택된 기술인 경우에만 집중할 것입니다.

워크플로

Super Hero 및 Villain 카탈로그에 대한 데이터 및 작업을 정의하는 간단한 Graphql 스키마를 상상해 보겠습니다.

enum Affiliation {
  GOOD
  EVIL
  UNDECIDED
}
type Character {
  id: ID!
  name: String!
  affiliation: Affiliation!
  rank: Int!
}
type Query {
   characters: [Character]!
   character(id: ID!): Character!   
}
input NewCharacterInput {
  name: String!
  affiliation: Affiliation!
  rank: Int!
}
input CharacterUpdateInput {
  id: ID!
  name: String
  affiliation: Affiliation
  rank: Int
}
type Mutation {
   addCharacter(newCharacter: NewCharacterInput!): Character!
   updateCharacter(update: CharacterUpdateInput!): Character!
}
type Subscription {
   characterAdded: Character!
}

프런트 엔드 개발자 워크플로

React와 Typescript를 사용하여 프런트 엔드를 구축한다고 가정해 보겠습니다. API와 통신하기 위해 Apollo를 라이브러리로 사용하기로 결정했습니다.
✨✨✨✨
🦾 엔터Graphql Code Generator

API/백엔드 개발자 워크플로

백엔드에서 Graphql 스키마를 계약으로 준수하고 해당 계약을 graphql 코드에서 request , response 및 resolver 유형의 유형 안전성을 보장하기 위한 기초로 사용하는 것이 가장 중요합니다.
✨✨✨✨
🦾 다시 한 번 Graphql Code Generator 우리를 위해 많은 작업을 저장합니다.