[GraphQL] React 서버에 GraphQL 타입 옮겨오기 (apollo-tooling)

apollo-tooling이란?

GraphQL서버에서 만든 쿼리와 뮤테이션을, Typescript에서 활용하려면
사용할 여러가지 변수에 타입을 다시 지정해주어야 한다.

apollo-tooling을 사용하면, 코드, tsx, 리액트 컴포넌트로 가서 쿼리와 뮤테이션을 찾고,
자동으로 인터페이스(타입)를 만들 수 있다.

 

apollo-tooling의 필요성

API(스키마)에 있는 모든 것을 위해 타입스크립트 타입을 만든다. (변수, 리턴타입 등)
Apollo를 콘솔에서 부를 수 있게 할 수 있다.

GraphQL에 작성되어 있는 타입을 그대로 옮겨오면,
typescript로 이루어진 프론트에서 타입을 재작성 해야하는 번거로움을 줄일 수 있다!

 

apollo-tooling 설치하기

npm i -g apollo

 

---

apollo-tooling 사용법

 

1. 설정파일 만들기 ( 프론트엔드 프로젝트 폴더내부 )

//apollo.config.js - 무조건 동일한 이름으로 만들어주세요 (js까지 포함)

// apollo에게 graphql(백엔드)의 존재를 알려준다.
module.exports = {
  client: {
    // ./src폴더의 모든 파일에서, 확장자가 .tsx나 .ts로 끝나는 파일을 검사한다.
    includes: ["./src/**/*.{tsx,ts}"],
    
    // 위에서 선택된 파일에 있는, 모든 gql 태그를 찾는다.
    tagName: "gql",
    service: {
      name: "instaclone-backend",
      url: "http://localhost:4000/graphql",
    },
  },
};

 

2. graphql 타입과 동일하게 ts interface 만들기 

 

apollo-tooling 명령어 전부보기

apollo

 

 

GraphQL 서버 켜주기 ( 백엔드 )

 

GraphQL 에 맞게 Typescript 전용 interface(Type) 파일 만들기

apollo client:codegen src/__generated__ --target=typescript --outputFlat

 

작업 설명

1. 아폴로가 react(프론트엔드)에 있는 gql태그(쿼리, 뮤테이션)를 찾아낸다.

2. graphql 서버 (백엔드)로 가서,
찾아낸 gql태그(쿼리, 뮤테이션)에 맞는
typescript(--target 옵션) interface를 만든다.

3. "src/__generated__" 폴더 안에
gql태그의 이름과 동일한 파일(--outputFlat)로 저장한다.

 

작업 결과

react 내부에 gql태그로 쿼리 or 뮤테이션 만들기

 

생성된 interface

//login.ts
export interface login_login {
  __typename: "LoginResult";
  ok: boolean;
  token: string | null;
}

export interface login {
  login: login_login;
}

export interface loginVariables {
  username: string;
  password: string;
}

 

3. 타입 사용하기

// App.js

import { gql, useQuery, useMutation } from "@apollo/client";

// 쿼리문 작성
const FEED_QUERY = gql`
  query Feed {
    Feed {
      id
      user {
        username
        avatar
      }
      file
      caption
      likeCount
      comments {
        user {
          username
          avatar
        }
        comment
      }
      commentCount
      createdAt
      isMine
      isLiked
    }
  }
`;

const LOGIN_MUTATION = gql`
  mutation login($username: String!, $password: String!) {
    login(username: $username, password: $password) {
      ok
      token
    }
  }
`;

function App() {
  // useQuery(쿼리문) 이용해, 작성한 쿼리 명령어 사용하고, 타입 지정하기
  const { data } = useQuery(FEED_QUERY);
  
  // useMutation(쿼리문) 이용해 작성한 쿼리 명령어 사용하고, 타입 지정하기
  const [loggedinMutation] = useMutation<login, loginVariables>(LOGIN_MUTATION);
  ...
}

 

 

---

번외

 

인터페이스 명령어 축약하기 (npm)

// package.json

{
  ...
  "scripts": {
    "codegen" : "apollo client:codegen src/__generated__ --target=typescript --outputFlat"
  ...
}

 

축약한 명령어 사용하기

npm run codegen

사용 결과