[typescript] 타입스크립트와 GraphQL에서 데이터 필드 재정의하기

11 Dec 2023

typescript

웹 애플리케이션을 개발하다 보면, 서버에서 제공되는 데이터를 클라이언트 측에서 특정 목적에 맞게 가공할 필요가 있습니다. 이를 위해 타입스크립트와 GraphQL을 함께 사용하여 데이터 필드를 재정의하는 방법을 알아보겠습니다.

타입스크립트에서 데이터 필드 재정의하기

타입스크립트에서는 인터페이스를 사용하여 데이터 모델을 정의합니다. 만약 서버에서 받아온 데이터를 클라이언트 측에서 수정하고 싶다면, 해당 데이터 모델을 재정의하여 필요한 필드를 추가하거나 수정할 수 있습니다.

예를 들어, 서버에서 받아온 유저 정보의 일부 필드를 가리거나, 새로운 필드를 추가하고 싶을 경우에는 다음과 같이 인터페이스를 재정의할 수 있습니다.

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

interface ModifiedUser extends Omit<User, 'email'> {
  isAdmin: boolean;
}

위 예제에서 Omit을 사용하여 User 인터페이스에서 email 필드를 제외한 새로운 ModifiedUser 인터페이스를 정의하였습니다.

GraphQL에서 데이터 필드 재정의하기

GraphQL에서는 클라이언트가 서버로부터 요청한 데이터를 정확히 받아올 수 있도록 쿼리를 작성합니다. 이때 클라이언트 측에서 특정 필드를 가공하거나 새로운 필드를 추가하기 위해서는 리졸버 함수에서 해당 동작을 정의해야 합니다.

예를 들어, 유저 정보를 조회하는 쿼리에서 특정 필드를 숨기거나 가공하고 싶을 경우, 해당 필드에 대한 리졸버 함수를 다음과 같이 정의할 수 있습니다.

const resolvers = {
  Query: {
    user: async (parent, args, context, info) => {
      const user = await getUser(args.id);
      // email 필드를 가리기
      delete user.email;
      return user;
    }
  }
};

위의 예제에서는 user 쿼리의 리졸버 함수에서 받아온 유저 정보의 email 필드를 삭제하여 클라이언트에 반환하고 있습니다.

결론

타입스크립트와 GraphQL을 함께 사용하여 클라이언트 측에서 데이터 필드를 재정의하는 방법에 대해 알아보았습니다. 이를 통해 웹 애플리케이션의 데이터를 보다 자유롭게 가공하고, 클라이언트의 요구에 맞게 데이터를 제공할 수 있습니다.

참고 문헌:

https://www.typescriptlang.org/docs/
https://graphql.org/