GraphQL Code Generator, 타입스크립트 정의 자동 생성

GraphQL Code Generator

 

주요 기능:

• GraphQL 쿼리로부터 타입스크립트 타입 생성
• Apollo Client, React Hooks와 통합 지원
• GraphQL 스키마 및 쿼리 자동 생성

 

 

설치, Apollo와 함께 사용할 GraphQL Code Generator 플러그인을 설치

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

npm i graphql
npm i -D typescript @graphql-codegen/cli
npm i-D @graphql-codegen/typescript-operations @graphql-codegen/typescript

 

// codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: "<http://localhost:4000/graphql>",
  documents: "./src/**/*.{tsx,ts}",
  generates: {
    "./src/__api__/types.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo"
      ],
      config: {
        withHooks: true,
        withHOC: false,
        withComponent: false
      }
    }
  }
};

export default config;

• GraphQL 스키마를 HTTP URL에서 가져오는 경우, 백엔드 서버가 실행되고 있어야 한다.
• 스키마를 로드하려면 서버가 요청에 응답할 수 있어야 하기 때문이다.

 

// package.json


"scripts": {
  "tailwind:build": "tailwindcss -i ./src/styles/tailwind.css -o ./src/styles/styles.css --watch",
  "start": "concurrently \\"nodemon --watch src --exec react-scripts start\\" \\"npm run tailwind:build\\"",
  "generate": "graphql-codegen",
  "build": "react-scripts build",
  "test": "react-scripts test",
  "eject": "react-scripts eject",
  "codegen": "graphql-codegen --config codegen.ts"
}

"generate": "graphql-codegen" 작성해주기

 

 

실행

백엔드 서버 켜져있는 상태로 진행

 npm run generate

• __api__폴더에 생성되는 것을 확인하기

 

 

사용법

https://www.graphql-code-generator.com/docs/guides/react/

export const LOGIN_MUTATION = gql`
  # (1) gql name을 재설정
  mutation login($loginInput: LoginInput!) {
    login(input: $loginInput) {
      ok
      token
      error
    }
  }
`;

interface ILoginForm {
  email: string;
  password: string;
}

export const Login = () => {
  const {
    register,
    getValues,
    formState: { errors },
    handleSubmit
  } = useForm<ILoginForm>();

  const [loginMutation] = useMutation<LoginMutation, LoginMutationVariables>(
    LOGIN_MUTATION
  );

  const onSubmit = () => {
    const { email, password } = getValues();
    loginMutation({
      variables: {
        // GraphQL 쿼리에서 사용하는 변수 이름으로 맞춰서 변경
        loginInput: {
          email,
          password
        }
      }
    });
  };

• generate 될때 type명에 Mutation을 자동으로 붙여준다.
• (1) gql name을 재설정 : loginMutation 으로 이름을 지정하고 generate를 하게되면 loginMutationMutation으로 생성하게 되므로 gql name을 재설정하고 generate하기

 

 

코드 설명

useMutation<LoginMutation, LoginMutationVariables>(LOGIN_MUTATION);

• LoginMutation은 Mutation의 응답으로 반환될 타입을 정의한다.
• LoginMutationVariables는Mutation에 전달할 변수의 타입을 정의한다.
• LOGIN_MUTATION은 GraphQL Mutation 쿼리를 포함하는 gql 템플릿 리터럴이다.

 

 

백엔드 실행 없이도 진행하는 방법, 로컬 스키마 파일을 사용

schema: ./path/to/schema.graphql # 로컬 스키마 파일 경로

// codegen.ts

import type { CodegenConfig } from "@graphql-codegen/cli";

const config: CodegenConfig = {
  schema: ./path/to/schema.graphql  // 로컬 스키마 파일 경로
  documents: "./src/**/*.{tsx,ts}",
  generates: {
    "./src/__api__/types.ts": {
      plugins: [
        "typescript",
        "typescript-operations",
        "typescript-react-apollo"
      ],
      config: {
        withHooks: true,
        withHOC: false,
        withComponent: false
      }
    }
  }
};

export default config;