GraphQLのfragmentを使ってコードを書くようにクエリを書こう

最近、GraphQLで作られたAPIを使ってiOSを開発しています。その中での感動を共有したかったので記事にしました！

GraphQLとは

GraphQLって何？って方は以下の記事がわかりやすいと思います！

GitHub APIから学ぶ次世代のAPI実装方式GraphQL

僕もGraphQLとはなんぞや？とわかりやすく説明するほどには理解していないのですが、GraphQLを使ってみる中で気づいた、GraphQLのTipsを紹介します。

例

例えば以下のようなtitleとdescriptionとurlというプロパティを持つArticleというObjectがあるとします。

そして

feed(id: Int): [Article]

というQueryが定義されているとします。

やりたいことは、0,1,2のidのfeedを取ってくるクエリを作ることです。

受け取りたいJSONは以下のような感じ。id0,1,2の3つの記事フィードのJSONが欲しい。

{
  "data": {
    "feed1": [
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
    ...
    ],
    "feed2": [
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
    ...
    ],
    "feed3": [
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
      {
　　　　　　　　　　　　　　　　"title": "僕が筋トレブロガーではなく『筋肉エンジニア』を名乗ると決めた理由",
        "description": "もっと自分自身が筋肉マッチョになっていかなければならないというのも、わりかし限界があります。自分はフィットネスで食っていく気がないからです。",
        "url": "https://silver-gym.net/blogger_or_engineer"
      },
    ...
    ]
  }
}

このときにFragmentを知ってる知らないかでクエリのDRYさと見やすさが大きく変わってきます。

Fragmentを使わないで書くと

query Feed {
  feed1: feed {
    title
    description
    url
  }
  feed2: feed {
    title
    description
    url
  }
  feed3: feed {
    title
    description
    url
  }
}

と書かなければいけません

    title
    description
    url

が３回出てくるんですよね。DRYじゃないし、見にくい。。。

Fragmentを使って書くと！

しかし、fragmentを使うとめっちゃ綺麗になります。クエリじゃなくてコードを書いている気分になります。

query Feed {
  feed1: feed {
    ...article
  }
  feed2: feed {
    ...article
  }
  feed3: feed {
    ...article
  }
}

fragment article on Article {
    title
    description
    url
}

fragmentによってArticleをまとめることができて、クエリがとてもスッキリして見やすくなりました。

まとめ

GraphQLのfragment最高です。

関連