7. apollo:codegen 활용하기

코드를 입력하세요

apollo 의 기능을 잘 활용하면 interface 를 자동으로 생성 할 수 있다

- Graphql 의 서버의 경우 이미 작업 및 Playground 를 활용하여 테스트 완료한 상태

npm install -g apollo

먼저 apollo 를 전역으로 설치한다

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

사용할 gql 을 선언한다

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

위에 명령을 사용해서 loing mutation 에 해당하는 interface 를 자동으로 생성한다

// 자동으로 생성된 코드
export interface login_login {
  __typename: "LoginResult";
  ok: boolean;
  token: string | null;
  error: string | null;
}

export interface login {
  login: login_login;
}

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

참고: https://www.apollographql.com/docs/react/development-testing/developer-tooling/#apollo-codegen

const [loginMutation] = useMutation<login, loginVariables>(LOGIN_MUTATION, {
    variables: {
      username: "test",
      password: "test",
    },
    onCompleted: (data) => data.login.token,
  });

생성된 인터페이스를 활용한 코드