[typescript] GraphQL 쿼리 변수 정의

22 Dec 2023

typescript

GraphQL을 사용할 때 종종 쿼리에 변수를 전달해야 할 때가 있습니다. TypeScript에서 GraphQL 쿼리 변수를 정의하는 방법에 대해 알아보겠습니다.

GraphQL 쿼리와 변수

GraphQL은 쿼리를 통해 데이터를 요청하는데, 때에 따라서는 쿼리에 동적인 변수를 사용하여 특정 데이터를 요청해야 할 수도 있습니다. 예를 들어, 특정 유저의 정보를 요청할 때 유저의 ID와 같은 변수를 사용해야 할 수 있습니다.

TypeScript에서 변수 정의

TypeScript를 사용하면, GraphQL 쿼리에서 사용할 변수를 강력한 타입으로 정의할 수 있습니다. 이를 위해 먼저 GraphQL Query의 타입을 정의하고, 이 타입을 사용해 변수를 정의합니다.

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

export const USER_DETAILS = gql`
  query UserDetails($userId: ID!) {
    user(id: $userId) {
      id
      name
      email
    }
  }
`;

export type UserDetailsVariables = {
  userId: string;
};

위 예제에서는 USER_DETAILS라는 GraphQL 쿼리를 정의하고, 해당 쿼리에 사용되는 변수를 UserDetailsVariables 타입으로 정의하였습니다.

쿼리 실행

실제로 쿼리를 실행할 때는 정의한 변수를 함께 전달해주어야 합니다.

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

const userId = '123';
const { loading, error, data } = useQuery<UserDetailsData, UserDetailsVariables>(USER_DETAILS, {
  variables: { userId },
});

위 예제에서는 useQuery를 사용하여 USER_DETAILS 쿼리를 실행하고, UserDetailsVariables 타입의 변수를 전달하였습니다.

이렇게 TypeScript를 사용하여 GraphQL 쿼리 변수를 정의하고 실행하는 방법을 알아보았습니다.

참고문헌:

Apollo Client - Using queries