GraphQL을 사용하면 서버로부터 정확한 데이터를 획들할 수 있습니다. 그러나 GraphQL 쿼리의 결과를 타입 안정성을 갖는 타입스크립트 소스 코드로 다루려면 어떻게 해야 할까요? 이 블로그에서는 GraphQL 쿼리에 타입스크립트 타입을 지정하는 방법에 대해 알아보겠습니다.

@apollo/client 라이브러리 설치

우선, @apollo/client 라이브러리를 설치해야 합니다. 타입이 포함된 GraphQL 쿼리를 사용하기 위해 귀하의 프로젝트에 이 라이브러리를 추가하세요.

npm install @apollo/client

GraphQL Code Generator 설정

다음으로, GraphQL Code Generator를 사용하여 GraphQL 쿼리로부터 타입을 생성하는 작업을 수행해야 합니다. 먼저, 프로젝트의 루트 디렉토리에 codegen.yml 파일을 만들고 다음과 같이 설정하세요.

schema: http://localhost:4000/graphql
documents: 'src/**/*.graphql'
generates:
  src/generated/graphql.ts:
    plugins:
      - "@graphql-codegen/typescript"
      - "@graphql-codegen/typescript-operations"

위 설정에서 schema는 사용 중인 GraphQL 서버의 엔드포인트를 가리키고, documents는 GraphQL 쿼리가 저장된 디렉토리를 가리킵니다. generates에서는 생성된 타입 정의를 저장할 파일 경로와 사용할 플러그인을 구성합니다.

코드 생성

이제 GraphQL Code Generator를 사용하여 설정한 대로 코드를 생성합니다.

npx graphql-codegen

이 명령을 실행하면 설정 파일에 정의된 내용에 따라 GraphQL 쿼리로부터 타입이 생성됩니다.

타입스크립트에서 사용

마지막으로, 생성된 타입 정의를 타입스크립트 코드에서 사용할 수 있습니다. 예를 들어, useQuery hook을 사용하여 GraphQL 쿼리를 호출하고 결과를 다룰 때 아래와 같이 타입을 명시적으로 지정할 수 있습니다.

import { useQuery } from '@apollo/client';
import { GetUserInfoQuery, GetUserInfoQueryVariables } from './generated/graphql';

function UserInfoComponent() {
  const { data, loading, error } = useQuery<GetUserInfoQuery, GetUserInfoQueryVariables>(GET_USER_INFO_QUERY, {
    variables: { userId: 123 }
  });

  if (loading) return <p>Loading...</p>;
  if (error || !data) return <p>Error!</p>;

  // 여기에서 data를 안전하게 다룰 수 있습니다.

  return <div>User Info: {data.userInfo.name}</div>;
}

위 코드에서 GetUserInfoQuery와 GetUserInfoQueryVariables는 GraphQL Code Generator를 통해 생성된 타입을 나타냅니다. useQuery hook을 호출할 때 이 타입들을 사용하여 데이터의 형태를 명시하고, 타입 안정성을 확보할 수 있습니다.

이렇게 하면 GraphQL 쿼리 결과를 타입 안전한 방식으로 다룰 수 있게 됩니다.

결론

타입스크립트와 GraphQL을 함께 사용하는 경우, @apollo/client 라이브러리와 GraphQL Code Generator를 통해 쿼리 결과에 타입을 지정할 수 있습니다. 이를 통해 코드의 안정성과 가독성을 향상시킬 수 있습니다.

참조: Apollo Client - 타입스크립트 GraphQL Code Generator 타입스크립트 핸드북 - 타입 지정