https://facebook.com/groups/graphql-kr logo
Join Slack
Powered by
안녕하세요! 저희 회사에서는 프 TS & Apollo / 백 TS & Apo...
# 질문
w
안녕하세요! 저희 회사에서는 프 TS & Apollo / 백 TS & Apollo & Graphene 사용하고 있고, 새로 개발하고 있는 서비스에 API를 연결하려는 단계에 있습니다. 두 가지 궁금한 점이 있는데요! • 프론트에서 API를 호출할 때 어차피 스키마에 정의된 타입 대로 가져오게 될 텐데 별도의 타입을 작성해주는 작업이 이중작업이라고 느껴져 찾아보던 중 스키마에 맞춰 타입을 gen 해주는 라이브러리가 있다는 사실을 알게 되었습니다. 그래서 바로 도입해보려고 하는데, 어떤 라이브러리를 많이 쓰시는지 & 도입했을 때 뜻밖의 단점이 있었는지 등이 궁금합니다. • 그리고 위에서 gen한 타입과 query 들을 어디에 위치시킬지도 고민이 되는데 보통 어떤 식으로 관리하시나요?
a
graphql-codegen 거의 많이 쓰는 것 같아요
저는 위치는 컴포넌트 옆에 바로 생성되게 하고 있습니다 near-operation-file 프리셋 설정을 해서요
w
@Alucard https://www.graphql-code-generator.com/plugins/near-operation-file-preset 이 링크 말씀하시는게 맞을까요?? 제가 아직 이 방식 자체의 컨셉이 잘 와닿지 않아서 컴포넌트 옆에 생성된다는게 조금 이해가 안되기는 하는데 한번 직접 해보겠습니다! 추천 감사드려요! 🙇
a
넵 디폴트로는 graphql.tsx 같은 파일 하나에 서버 schema 와 사용된 Operation 에 대한 generated type 과 query mutation 등이 전부 들어가게 되는데 나중에 몇십만 라인까지 커지게 되면 에디터에서 굉장히 느려지더라구요. 초반에는 그냥 써보시고 필요하시면 적용하셔도 될 듯 합니다
w
@Alucard 오 그렇군요 감사합니다! 한 가지만 더 여쭤봐도 될까요? 현재 프로젝트에서 호출해야 하는 백엔드 서버가 2가지인데, 각각 스키마가 다르게 구성되어 있습니다. 호출하는 서버에 따라 폴더를 나누어 파일을 관리하신적이 있으실까요?
a
네 codegen.yml 파일 내에서 generates: 옵션 하위에 per output 레벨로 구성해서 각각 schema옵션을 먹일 수 있습니다 예를 들어서
Copy code
generates:
  generated/graphql.tsx:
    schema:
      - <http://localhost:5000/graphql>
    documents:
      - ...
  generated/graphql2.tsx:
    schema:
      - <http://localhost:3000/graphql>
    documents:
      - ...
이런식입니다
w
너무 많은 도움이 되었습니다! 감사드려요! 🙇
a
🙇‍♂️
t
별도의 타입을 작성해주는 작업이 이중작업이라고 느껴져 찾아보던 중 스키마에 맞춰 타입을 gen 해주는 라이브러리가 있다는 사실을 알게 되었습니다.
코드젠의 축복을 이제서야 아시게 되셨군요... ㅋㅋ
현재 프로젝트에서 호출해야 하는 백엔드 서버가 2가지인데, 각각 스키마가 다르게 구성되어 있습니다.
스키마 스티칭이라는 솔루션도 있습니다~ (여러개의 스키마를 하나의 스키마로 합쳐줌) https://www.graphql-tools.com/docs/schema-stitching/stitch-combining-schemas 번들사이즈가 커서;;; 클라이언트에서 사용하기는 좀 무리가 있는데 혹시 필요하시면 도입해보셔도 좋을거같습니다. (사실 저희는 클라이언트에서도 쓰고있어요)
Copy code
const schema = stitchSchemas({
    subschemas: [
      {
        schema: remoteSchema1,
        async executor({ document, variables }) {
          // ...
          return data
        },
      },,
      {
        schema: remoteSchema2,
        async executor({ document, variables }) {
          // ...
          return data
        },
      },
    ],
  })
a
@Tony Won 오 혹시 만약에 타입 이름같은게 겹치면 특정 네이밍룰로 자동 변환되나요 ?
t
네임스페이스 옵션이 있을거에요 ㅎㅎ
RenameTypes 보시면 될거같아요~ ㅎㅎ
a
아하~ 감사합니다!
w
오! 스키마 스티칭이라는 개념도 있군요 처음 알았습니다 ㅎㅎ 감사해요 🙏🙏🙏
저희가 apollo 사용하고 있는데 혹시 apollo-tooling에서 제공하는 codegen 기능은 추천하지 않으시나요?? https://github.com/apollographql/apollo-tooling#code-generation
t
저희가 apollo 사용하고 있는데 혹시 apollo-tooling에서 제공하는 codegen 기능은 추천하지 않으시나요??
넵 graphql-code-generator가 훨씬 좋습니다
Apollo가 잘 못 만들어요 (속닥속닥) ㅠ
😂 1
👌 2
w
와 한번 해보니 graphql-code-generator는 hook까지 만들어주네요;; 감사히 잘 쓰겠습니다
t
@whatastunning fragment까지 꼭 사용해보시길 바래요~~~
2 Views
Open in Slack
PreviousNext
Powered by