롤챔스 할때까지.. 시간이 좀 남아서 글을 한개 더 써봄


GraphQL은 restful api의 대안이고 뭐 스키마 정의를 공유하고 질의를 프론트에서 만들고 이런 특징이 있는데


지금 얘기할건 그게 아니고 간단하게 타입스크립트랑 같이 쓰는 방법을 소개함





GraphQL은 독자적인 언어라서 임포트를 할때 타입정의가 딸려오질 않음


이 질의로 얻을 수 있는 데이터가 어떤 스키마를 따르고 있는지, 인풋으로 필요한 값은 어떤 필드가 필요한지 전혀 알 수가 없음


스키마 자체가 문서기때문에 그걸 보고 타입정의를 직접 때려박는 방법이 있지만


매번 수동으로 바꾸는건 유지보수에 좋지 않기 때문에 툴을 하나 소개해볼까함




스미카에 관련된 기능을 해주는 cli툴인데 생각보다 기능이 많지는 않음


비슷한 동작을 하는 라이브러리가 몇개 더 있긴한데 하나같이 먼가 나사가 빠진것처럼 동작하기 때문에


그나마 나은 이녀석을 사용함(근데 이놈도 정상은 아님)




우리가 관심을 가질 기능은


메인 스키마 typeDef.graphql랑 다른 쿼리 *.gql를 사용해서 쿼리의 타입을 만들어주는 기능인데


걍 *.gql파일을 types/*.ts 타입정의 파일로 바꿔준다 생각하면 편함


사실 typeDefs.graphql 파일은 프론트에서만 쓰는게 아니라 백엔드 서비스중 한 곳(graphql 엔트리)에서도 사용하고 있기 때문에 저 파일은 따로 특별하게 관리하고 매번 복사본만을 사용하는데 그건 별로 중요하지 않으니까 대충 넘어가자


암튼 이 동작의 스크립트를 package.json에 박아주자


"scripts": {
"schema": "npx apollo codegen:generate --schema=../docs/typeDefs.graphql --queries=./src/**/*.gql --target typescript --outputFlat --addTypename src/query/types && cp ../docs/typeDefs.graphql ./src/query/typeDefs.graphql",
},


이렇게 짜두고 yarn schema치면 알아서 스키마를 타입스크립트로 해석된다


이걸 임포트해서 타입을 사용하면 된다


그럼 자동완성도 알아서 되고 먼가 어긋나면 바로바로 타입에러 띄워줘서 개발하는 맛이 난다



여기서 소개한 apollo-cli는 쿼리스키마만 해석하고 백엔드 스키마는 순전히 검증용으로만 사용하기 때문에


백엔드에서는 다른 툴을 사용함 개인적으로 gql2ts 이게 그나마 나은것 같음