[GraphQl] GraphQl - Codegen 설치하기

2023. 3. 26. 15:40·Back/Database

1. GraphQl Code Generator 사이트에 접속해준다.

https://the-guild.dev/graphql/codegen

 

Home – GraphQL Code Generator

GraphQL Code Generator Documentation

the-guild.dev

 

2. installation 페이지에 들어간다

https://the-guild.dev/graphql/codegen/docs/getting-started/installation

 

Installation – GraphQL Code Generator

GraphQL Code Generator is a tool for generating code from GraphQL schema and operations. It can generate code for various platforms, such as React, Angular, Node, and more.

the-guild.dev

 

3. 처음 프로젝트를 yarn을 이용해서 만들었기 때문에 yarn으로 설치해 줄 것이다.

yarn add -D @graphql-codegen/cli
yarn add -D @graphql-codegen/typescript

 

4. 두개를 모두 설치했다면 codegen.yaml이라는 파일을 하나 만든다.

파일 위치

codegen.yaml

schema: http://backendonline.codebootcamp.co.kr/graphql
generates:
  ./src/commons/types/types.ts:
    plugins:
      - typescript
    config:
      typesPrefix: I

yaml 파일은 띄어쓰기, 즉 스페이스 키로 부모와 자식을 구별하기 때문에 에러가 날 경우 띄어쓰기를 다시 해볼 필요가 있다.

 

5. pakage.json 파일로 이동해 scripts에 "generate": "graphql-codegen" 추가해준다.

 "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint",
    "generate": "graphql-codegen"
  },

이제 yarn generate 명령어를 사용할 수 있는데, 처음에 yarn add -D @graphql-codegen/cli 를 설치했기 때문에 사용이 가능해진 것이다.

 

6. 터미널에 yarn generate를 입력해 다운로드 한다.

이렇게 뜨면 성공한거

yaml파일에 입력한 위치로 가서 잘 다운로드가 됐는지 확인한다.

저작자표시 (새창열림)

'Back > Database' 카테고리의 다른 글

[MYSQL] 오류코드 1452  (0) 2023.10.06
[GraphQL] Query 와 Mutation  (0) 2023.03.15
[GraphQL] GraphQL이란?  (0) 2023.03.10
이클립스 MySQL연동(8.0.28)  (0) 2022.01.24
'Back/Database' 카테고리의 다른 글
  • [MYSQL] 오류코드 1452
  • [GraphQL] Query 와 Mutation
  • [GraphQL] GraphQL이란?
  • 이클립스 MySQL연동(8.0.28)
soyeon26
soyeon26
  • soyeon26
    개발 일지
    soyeon26
  • 전체
    오늘
    어제
    • 분류 전체보기 (107)
      • Web (22)
        • Web (1)
        • HTTP (0)
      • Language (29)
        • Java Script (3)
        • Type Srcipt (1)
        • Java (25)
      • Front (19)
        • HTML+CSS (4)
        • React (15)
      • Back (41)
        • Spring(Springboot) (9)
        • JSP (21)
        • Database (5)
        • NestJS (6)
      • Devops (6)
        • Docker (1)
        • Git & SVN (5)
      • App (7)
        • Android (7)
      • IT 정보 (3)
  • 블로그 메뉴

    • 방명록
  • 링크

  • 공지사항

  • 인기 글

  • 태그

    Next.js
    csrvsssr
    김영한
    과학기술인등록번호 조회
    SSR
    자바스크립트set
    SQL강의 추천
    과학기술인 등록
    springboot
    Next.js 필요성
    중복제거
    Spring
    강의 후기
    데이터베이스 강의
    csr과ssr의 차이
    javascript
    sql강의
    스프링부트
    과학기술인번호 조회
    java의 정석
    React Next.js
    인프런
    과학기술인 등록번호 발급
    과학기술인 번호 발급
    React
    서블릿
    Java
    강의후기
    프론트엔드
    백엔드
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.0
soyeon26
[GraphQl] GraphQl - Codegen 설치하기
상단으로

티스토리툴바