타입스크립트와 GraphQL은 데이터를 다루는 데 매우 유용한 도구입니다. 특히 GraphQL에서는 클라이언트가 필요한 데이터 필드를 선택하는 기능이 있습니다. 이 기능을 사용하면 불필요한 데이터를 받지 않아 네트워크 부하를 줄일 수 있습니다. 타입스크립트와 GraphQL을 함께 사용할 때, 데이터 필드를 선택하는 방법을 알아보겠습니다.

1. GraphQL 쿼리에서 데이터 필드 선택하기

GraphQL 쿼리에서는 필요한 데이터 필드만을 선택하여 서버로부터 해당 필드만을 받아올 수 있습니다. 예를 들어, 다음과 같은 GraphQL 쿼리가 있다고 가정해봅시다.

{
  user(id: 123) {
    name
    email
  }
}

위의 쿼리에서는 name과 email 필드만을 선택하여 서버로부터 받아올 수 있습니다.

2. 타입스크립트에서 GraphQL 쿼리 사용하기

타입스크립트에서는 GraphQL 쿼리를 사용할 때, 선택한 데이터 필드에 대한 타입을 지정할 수 있습니다. 예를 들어, Apollo Client를 사용하여 타입스크립트에서 GraphQL 쿼리를 작성할 때 다음과 같이 작성할 수 있습니다.

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

const GET_USER = gql`
  query GetUser($id: ID!) {
    user(id: $id) {
      name
      email
    }
  }
`;

type User = {
  name: string;
  email: string;
};

function UserProfile() {
  const { loading, error, data } = useQuery(GET_USER, {
    variables: { id: 123 },
  });

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;

  const user: User = data.user;

  return (
    <div>
      <p>Name: {user.name}</p>
      <p>Email: {user.email}</p>
    </div>
  );
}

User 타입을 정의하여 선택한 데이터 필드에 대한 타입을 명시하였습니다.

3. 정리

타입스크립트와 GraphQL을 함께 사용할 때, 데이터 필드를 선택하는 방법에 대해 알아보았습니다. GraphQL 쿼리에서 필요한 필드만을 선택하여 서버로부터 해당 필드만을 받아올 수 있고, 타입스크립트에서 선택한 데이터 필드에 대한 타입을 명시하여 안전하게 사용할 수 있습니다.

이러한 방식을 통해 네트워크 부하를 줄이고, 안전하게 데이터를 다룰 수 있습니다.

참고 문헌:

• Apollo Client 공식 문서