GraphQL Introduction

December 10, 2016

이 글은 GraphQL 튜토리얼을 보고 간단하게 정리한 글입니다. 문법의 기능적인 부분만 중점적으로 추려냈으니, 장단점에 대한 설명이 필요하시다면 원문을 참고하세요.

코드도 원문을 인용했습니다. 다만 몇몇 긴 부분은 추려서 줄였습니다.

Queries and Mutation

Fields

// Query
{
  hero {
    name
    # Queries can have comments!
    friends {
      name
    }
  }
}

// Result
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        },
        {
          "name": "Leia Organa"
        }
      ]
    }
  }
}

Arguments

// Query
{
  human(id: "1000") {
    name
    height(unit: FOOT)
  }
}

// Result
{
  "data": {
    "human": {
      "name": "Luke Skywalker",
      "height": 5.6430448
    }
  }
}

Aliases

// Query
{
  empireHero: hero(episode: EMPIRE) {
    name
  }
  jediHero: hero(episode: JEDI) {
    name
  }
}

// Result
{
  "data": {
    "empireHero": {
      "name": "Luke Skywalker"
    },
    "jediHero": {
      "name": "R2-D2"
    }
  }
}

Fragment

// Query
{
  leftComparison: hero(episode: EMPIRE) {
    ...comparisonFields
  }
  rightComparison: hero(episode: JEDI) {
    ...comparisonFields
  }
}

fragment comparisonFields on Character {
  name
  appearsIn
  friends {
    name
  }
}

// Result
{
  "data": {
    "leftComparison": {
      "name": "Luke Skywalker",
      "appearsIn": [
        "NEWHOPE"
      ],
      "friends": [
        {
          "name": "Han Solo"
        }
      ]
    },
    "rightComparison": {
      "name": "R2-D2",
      "appearsIn": [
        "NEWHOPE"
      ],
      "friends": [
        {
          "name": "Luke Skywalker"
        }
      ]
    }
  }
}

Variables

// Query
query HeroNameAndFriends($episode: Episode) {
  hero(episode: $episode) {
    name
    friends {
      name
    }
  }
}

// Variables
{
  "episode": "JEDI"
}

// Result
{
  "data": {
    "hero": {
      "name": "R2-D2",
      "friends": [
        {
          "name": "Luke Skywalker"
        }
      ]
    }
  }
}

Directives

// Query
query Hero($episode: Episode, $withFriends: Boolean!) {
  hero(episode: $episode) {
    name
    friends @include(if: $withFriends) {
      name
    }
  }
}

// Variables
{
  "episode": "JEDI",
  "withFriends": false
}

Mutations

// Query
mutation CreateReviewForEpisode($ep: Episode!, $review: ReviewInput!) {
  createReview(episode: $ep, review: $review) {
    stars
    commentary
  }
}

// Variables
{
  "ep": "JEDI",
  "review": {
    "stars": 5,
    "commentary": "This is a great movie!"
  }
}

// Results
{
  "data": {
    "createReview": {
      "stars": 5,
      "commentary": "This is a great movie!"
    }
  }
}

Inline fragment

// Query
query HeroForEpisode($ep: Episode!) {
  hero(episode: $ep) {
    name
    ... on Droid {
      primaryFunction
    }
    ... on Human {
      height
    }
  }
}

Meta field

# Query
{
  __schema {
    types {
      name
    }
  }
}

// Result
{
  "data": {
    "__schema": {
      "types": [
        {
          "name": "Query"
        },
        // ...
        {
          "name": "__DirectiveLocation"
        }
      ]
    }
  }
}