[typescript] 타입스크립트로의 GraphQL 뮤테이션 작성

22 Dec 2023

typescript

GraphQL은 API를 구축할 때 사용되는 강력한 쿼리 언어이며, 타입스크립트와 함께 사용하면 더욱더 안전하고 효율적인 코드를 작성할 수 있습니다. 이번 블로그에서는 타입스크립트로 GraphQL 뮤테이션(mutation)을 작성하는 방법에 대해 알아보겠습니다.

1. GraphQL 뮤테이션 이란?

GraphQL 뮤테이션은 API 서버에서 데이터를 수정하거나 변경하는 작업을 수행하는 데 사용됩니다. 예를 들어, 새로운 데이터를 추가하거나 기존 데이터를 업데이트하거나 삭제하는 등의 작업이 뮤테이션을 통해 이루어집니다.

2. 타입스크립트와 함께 GraphQL 뮤테이션 작성하기

GraphQL 뮤테이션을 타입스크립트와 함께 작성하기 위해서는 다음 단계를 따릅니다.

2.1. GraphQL 스키마 정의하기

먼저, GraphQL 스키마를 작성하고 뮤테이션을 정의합니다. 예를 들어, 다음과 같이 새로운 사용자를 추가하는 간단한 뮤테이션을 정의할 수 있습니다.

type Mutation {
  addUser(name: String!, email: String!): User
}

2.2. 타입스크립트 인터페이스 정의하기

다음으로, 뮤테이션에 사용될 데이터의 타입을 타입스크립트로 정의합니다. 예를 들어, 사용자 데이터의 타입을 다음과 같이 정의할 수 있습니다.

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

2.3. 뮤테이션 함수 작성하기

마지막으로, 실제로 뮤테이션을 수행하는 함수를 작성합니다. Apollo Client나 다른 GraphQL 클라이언트 라이브러리를 사용한다면, 뮤테이션 함수는 해당 라이브러리의 API를 활용하여 작성됩니다. 예를 들어, Apollo Client를 사용하는 경우 다음과 같이 뮤테이션 함수를 작성할 수 있습니다.

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

const ADD_USER = gql`
  mutation AddUser($name: String!, $email: String!) {
    addUser(name: $name, email: $email) {
      name
      email
    }
  }
`;

const addUser = (name: string, email: string) => {
  // 뮤테이션을 수행하는 로직 작성
}

위 코드에서 gql 함수를 사용하여 뮤테이션 쿼리를 정의하고, addUser 함수를 통해 뮤테이션을 수행합니다.

마치며

이제 타입스크립트와 함께 GraphQL 뮤테이션을 작성하는 방법에 대해 간략히 살펴보았습니다. 타입스크립트를 사용하면 뮤테이션에 사용되는 데이터의 타입을 명확하게 정의할 수 있고, 런타임 오류를 최소화하여 안전하고 견고한 코드를 작성할 수 있습니다. GraphQL과 타입스크립트를 함께 사용하여 API 개발을 더욱 즐겁고 효율적으로 만들어보세요!

참고문헌: