• 본 시리즈에서는 How to GraphQL의 Tutorial 문서들을 차례대로 번역합니다.
• 이 글은 GraphQL Advanced - Tooling and Ecosystem을 번역한 글입니다.
• 오역 또는 의역이 있을 수 있습니다. 양해 부탁드리며, 수정할 필요한 부분은 댓글로 요청해주세요.

도구와 생태계

이미 눈치채셨겠지만, GraphQL 생태계는 놀라운 속도로 성장하고 있습니다. 그 이유 중 하나는 바로 GraphQL을 사용하면 좋은 도구를 쉽게 개발해낼 수 있기 때문입니다. 그 이유가 무엇인지, 그리고 자주 사용되는 좋은 도구들이 어떤 것들이 있는지 이번 장에서 알아보겠습니다.

GraphQL의 기본적인 사항이 이미 익숙하다면, GraphQL의 타입 체계를 사용하여 API 명세를 빠르게 정의할 수 있다는 것을 아실 겁니다. 개발자는 이를 통하여 API가 제공하는 기능을 명확하게 정의할 뿐만 아니라, 스키마를 기반으로 쿼리들에 대하여 유효성 검사를 수행할 수 있습니다.

GraphQL의 놀라운 점은 이것이 서버에서만 사용 가능한 기능이 아니라는 것입니다. GraphQL에서는 클라이언트가 스키마에 대한 정보를 서버에 물어볼 수 있습니다. GraphQL에서는 이를 Introspection(자가 분석)이라고 부릅니다.

Introspection

스키마를 설계하는 사람은 당연히 스키마에 대하여 잘 알고 있지만, 만약 클라이언트가 GraphQL API를 통하여 어떤 데이터에 접근 가능한지 알고 싶다면 어떻게 해야 할까요? GraphQL에 __schema 메타 필드에 대한 쿼리를 보내면 이에 대한 정보를 얻을 수 있습니다. 이 필드는 각 명세의 최상위 타입에 대한 쿼리에서 항상 사용할 수 있습니다.

query {
  __schema {
    types {
      name
    }
  }
}

아래의 스키마 정의 예시를 보도록 하겠습니다.

type Query {
  author(id: ID!): Author
}

type Author {
  posts: [Post!]!
}

type Post {
  title: String!
}

위에서 언급한 바와 같이 Introspection 쿼리를 보내면, 아래와 같은 결과를 얻게 됩니다.

{
  "data": {
    "__schema": {
      "types": [
        {
          "name": "Query"
        },
        {
          "name": "Author"
        },
        {
          "name": "Post"
        },
        {
          "name": "ID"
        },
        {
          "name": "String"
        },
        {
          "name": "__Schema"
        },
        {
          "name": "__Type"
        },
        {
          "name": "__TypeKind"
        },
        {
          "name": "__Field"
        },
        {
          "name": "__InputValue"
        },
        {
          "name": "__EnumValue"
        },
        {
          "name": "__Directive"
        },
        {
          "name": "__DirectiveLocation"
        }
      ]
    }
  }
}

보시다시피 스키마가 포함하는 모든 타입들에 대한 정보를 쿼리했습니다. 앞서 정의한 객체 타입과 스칼라 타입에 대한 정보가 반환되었습니다. 잘 보시면, 심지어 Introspection 타입에 대한 여러 가지 정보도 확인할 수 있습니다!

Introspection 타입으로부터 이름 이외의 다양한 정보를 활용할 수 있습니다. 아래의 예시를 살펴봅시다.

{
  __type(name: "Author") {
    name
    description
  }
}

이 예시에서는 __type 메타 필드를 사용하여 특정 타입의 이름과 설명에 대한 쿼리를 전송하고 있습니다. 위의 쿼리에 대한 결과는 아래와 같습니다.

{
  "data": {
    "__type": {
      "name": "Author",
      "description": "The author of a post.",
    }
  }
}

보시다시피 Introspection은 GraphQL이 제공하는 강력한 기능으로, 여기서는 아주 일부만 다룬 것에 불과합니다. Introspection 스키마에서 사용 가능한 필드와 타입이 어떤 것들이 있는지 관련 명세를 확인하시기 바랍니다.

GraphQL 생태계의 많은 도구들은 저마다 놀라운 기능들을 제공하는 데에 Introspection을 활용합니다. 문서 브라우저, 자동 완성, 코드 생성, 모든 것이 가능합니다! GraphQL API를 개발하고 사용하는 과정에서 아주 유용하게 쓰이는 도구 중 하나인 GraphiQL도 Introspection 기능에 강하게 의존합니다.

GraphQL Playground

GraphQL Playground는 GraphQL API와 상호작용할 수 있는 강력한 "GraphQL IDE"입니다. 이 도구는 GraphQL 쿼리, 뮤테이션, 구독 등을 작성할 수 있는 에디터 기능과, 자동 완성 및 코드 검사 기능과 스키마 구조를 빠르게 시각화할 수 있는 문서 탐색기 기능까지 제공합니다(이 모든 기능들은 Introspection 기능을 활용하는 것입니다). 또한 쿼리 이력을 표시해주고, 여러 GraphQL API를 나란히 두고 작업할 수 있도록 해줍니다. 또한,graphql-config와 자연스럽게 통합됩니다.

GraphQL Playground는 개발을 위한 아주 강력한 도구입니다. curl 등의 프로그램을 사용하여 평문 GraphQL 쿼리를 전송하는 작업을 하지 않아도 GraphQL 서버에 쿼리를 테스트해보거나 디버깅할 수 있습니다.

Quiz

GraphQL 서버의 타입 체계를 다루는 대부분의 도구에서 사용하는 메커니즘은?

• The IDL
• Introspection
• GraphiQL
• Subscriptions