GraphQL은 API를 쉽게 만들고 사용할 수 있도록 도와주는 강력한 쿼리 언어이다. 이를 통해 데이터를 가져오거나 변경할 수 있는데, 변경에 관련된 것은 주로 뮤테이션을 사용하여 처리한다.

TypeScript로 GraphQL을 사용할 때도 뮤테이션을 정의하고 사용하는 방법을 알고 있어야 한다.

1. 뮤테이션 정의

뮤테이션은 GraphQL 스키마에서 정의된 변경 사항을 나타내는데, 보통 서버측에서 해당 동작을 수행하게 된다. TypeScript에서는 이러한 뮤테이션을 정의할 때 다음과 같이 작성한다.

import { gql } from 'graphql-tag';

const CREATE_USER_MUTATION = gql`
  mutation CreateUser($input: CreateUserInput!) {
    createUser(input: $input) {
      id
      name
      email
    }
  }
`;

위의 코드는 CREATE_USER_MUTATION이라는 뮤테이션을 정의한다. 이 뮤테이션은 createUser라는 서버 측 뮤테이션과 매핑되며, id, name, email을 반환한다.

2. 뮤테이션 실행

정의된 뮤테이션을 실행하기 위해서는 GraphQL 클라이언트를 사용하여 서버에 해당 뮤테이션을 전달해야 한다. 아래는 Apollo Client를 사용하여 뮤테이션을 실행하는 예시이다.

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

function CreateUserComponent() {
  const [createUser] = useMutation(CREATE_USER_MUTATION);

  // 사용자 생성 작업 수행
  const handleCreateUser = () => {
    createUser({
      variables: { input: { name: 'John', email: 'john@example.com' } },
    });
  };

  // 뮤테이션 실행 버튼
  return <button onClick={handleCreateUser}>Create User</button>;
}

결론

TypeScript를 사용하여 GraphQL 뮤테이션을 정의하고 실행하는 방법에 대해 알아보았다. 이를 통해 GraphQL API를 사용할 때 데이터 변경에 대한 요청을 보내고 처리하는 방법을 숙지할 수 있다.

더 많은 정보를 원하시면 GraphQL 공식 문서를 참고하시기 바랍니다.