이번 포스트에서는 타입스크립트와 GraphQL을 함께 사용할 때, 데이터 변환에 대해 다뤄보겠습니다. GraphQL은 서버로부터 받은 데이터를 타입스크립트의 타입으로 변환하는 과정에서 몇 가지 주의해야 할 점이 있습니다. 함께 살펴보도록 하겠습니다.

시작하기 전에

먼저, 타입스크립트와 GraphQL에 익숙하다는 가정하에 이야기를 진행하겠습니다. 또한, 코드 예시는 Apollo Client를 사용한 예제를 중심으로 설명합니다. Apollo Client는 GraphQL 데이터를 서버로부터 가져와 클라이언트 앱에서 사용하는 데에 유용한 라이브러리입니다.

타입스크립트에서 GraphQL 데이터 변환하기

GraphQL에서 쿼리를 보낸 후, 서버는 JSON 형태로 응답을 합니다. 이러한 JSON 데이터를 타입스크립트에서 사용하기 위해서는 변환 과정이 필요합니다.

interface User {
  id: number;
  name: string;
  email: string;
}

const userDataFromServer = {
  id: "1",
  name: "John",
  email: "john@example.com"
};

const user: User = {
  id: parseInt(userDataFromServer.id),
  name: userDataFromServer.name,
  email: userDataFromServer.email
};

위 코드에서 userDataFromServer는 실제로는 GraphQL 서버에서 받아온 JSON 데이터일 것입니다. 이 데이터를 User 인터페이스에 맞게 타입스크립트에서 변환하여 사용할 수 있습니다.

Apollo Client와 함께 사용하기

Apollo Client를 사용하면 GraphQL 데이터를 손쉽게 받아올 수 있습니다. 하지만 이를 타입스크립트와 함께 사용할 때, 데이터의 타입 변환에 대한 고민이 필요합니다. 예를 들어, GraphQL에서 받아온 데이터를 타입으로 변환하는 typePolicies를 설정해주어야 합니다.

import { InMemoryCache, Reference, makeVar } from '@apollo/client';

export const cache: InMemoryCache = new InMemoryCache({
  typePolicies: {
    Query: {
      fields: {
        users: {
          read(existing) {
            return existing;
          },
          merge(existing = [], incoming: User[]) {
            return incoming;
          },
        },
      },
    },
  },
});

위의 코드에서 merge 함수를 통해 GraphQL에서 받아온 User 타입의 데이터를 타입스크립트에서 사용할 수 있는 형태로 변환하여 반환하게 됩니다.

마치며

타입스크립트와 GraphQL을 함께 사용할 때, 서버로부터 받은 JSON 형태의 데이터를 타입스크립트에서 사용하기 쉽도록 변환해야 합니다. 이를 위해서 Apollo Client를 사용할 경우, typePolicies를 활용하여 데이터의 변환을 쉽게 할 수 있습니다.

이상으로 타입스크립트와 GraphQL에서의 데이터 변환에 대한 내용을 다뤄보았습니다. 감사합니다!

참고 자료

• Apollo Client 공식 문서