GraphQLのfragmentを試す

GraphQL

ミリしらだけどAndroidにもfragmentってあるよね。

モチベーション

  • fragmentを使ったことがないので使ってみたい

fragment

graphql.org

graphql.orgのfragmentの説明がいきなり例から入ってちょっと笑った。たしかに例交えたほうが説明しやすい。

fragmentを使うことで以下のことが実現できる。

  • フィールドの集合を構成できる
  • クエリに含めることができる

さっそく書いてみよう。

コード

GraphQLサーバーはlucasbento/graphql-pokemonを利用。
fragmentを無理やり使用するケースを考えた。

{
  "data": {
    "pokemon": {
      "number": "025",
      "name": "Pikachu",
      "types": [
        "Electric"
      ]
    },
    "pokemons": [
      {
        "number": "001",
        "name": "Bulbasaur",
        "types": [
          "Grass",
          "Poison"
        ]
      },
      {
        "number": "002",
        "name": "Ivysaur",
        "types": [
          "Grass",
          "Poison"
        ]
      }
    ]
  }
}

下記に記載するクエリはどちらも上記のレスポンスを得る。

fragmentを使用しない場合

query {
  pokemon(name: "Pikachu") {
    number
    name
    types
  }
  pokemons(first: 2) {
    number
    name
    types
  }
}

fragmentを使用した場合

query {
  pokemon(name: "Pikachu") {
     ...pokemonFragment
  }
  pokemons(first: 2) {
     ...pokemonFragment
  }
}

fragment pokemonFragment on Pokemon {
  number
  name
  types
}

共通化できていて良い。
また、以下のようにfragmentとフィールドをまとめて利用することもできる。

query {
  pokemon(name: "Pikachu") {
     ...pokemonFragment
  }
  pokemons(first: 2) {
     ...pokemonFragment
     id  // ココ!
  }
}

fragment pokemonFragment on Pokemon {
  number
  name
  types
}

参考