はじめてのGraphQL

GraphQLとは

GraphQLとは一言でいうと、サーバーへの問い合わせ言語となります。

似たような例でいうと、SQLはデータベースへの問い合わせ言語があります。

GraphQLも似たようなもので、とあるサーバーに対してデータをもらうためのクエリ言語となります。

従来と大きく違うのは、クライアント側で必要な情報だけをサーバー側に要求し、サーバー側はそのクエリに応じてレスポンスを返します。

RESTとの比較

GraphQLはRESTとの違いを理解すると、特徴がよく分かるかと思いますのでTwitterのAPIを例に説明します。

Twitter REST API

Twitter REST APIのサイトをみるとサイドバーに大量のエンドポイントが設定されているのがわかります。 westplain.sakuraweb.com

試しにユーザー情報を取得するとしたらGET users/showにクエリを投げる必要があります。

そしてそのレスポンスには大量のパラメータが返却されます。 f:id:Okerra:20200109201054p:plain

Twitter GraphQL API

次にTwitter GraphQL APIの仕様を見ていきます。

Twitter GraphQL APIはGraphQL Hubというサイトで確認します。

このGraphQL Hubを使えば、簡単にリクエストを送り、実際にどのようなレスポンスが帰ってくるかを確認することができます。

まず GraphQL Hub にアクセスしTwitterを選択します。 f:id:Okerra:20200109195730p:plain

するとこのような画面が表示されます。 f:id:Okerra:20200109195954p:plain

GrapghQLの文法については後述しますので、とりあえず下記をそのままコピーして、左側に貼り付けたら三角マークのstartボタンを押します。

{
  graphQLHub
  twitter {
    user (identifier: name, identity: "clayallsopp") {
      id
      name
      profile_image_url
      tweets_count
      followers_count
    }
  }
}

するとレスポンスとしてユーザーのID、名前、イメージURL、ツイート数、フォロワー数が取得できました。

{
  "data": {
    "graphQLHub": "Use GraphQLHub to explore popular APIs with GraphQL! Created by Clay Allsopp @clayallsopp",
    "twitter": {
      "user": {
        "id": "48464282",
        "name": "Clay Allsopp",
        "profile_image_url": "http://pbs.twimg.com/profile_images/1003496219241414656/r_lwv_6L_normal.jpg",
        "tweets_count": 2514,
        "followers_count": 2317
      }
    }
  }
}

ここで注目したいのは、レスポンス内容はリクエストで設定したパラメーターのみがレスポンスで返却されているという点です。

このようにGrapghQLのAPIを使えば、ある特定のエンドポイントに欲しいデータだけをリクエストするだけで必要な情報を取得できます。

まとめ

REST

エンドポイントが複数あり、決まったエンドポイントにリソース取得のクエリを投げる
レスポンスは決まったデータ構造で不要なデータも全て返される

GraghQL

決まったエンドポイントは1つのみ
取得できるデータはクライアント側が欲しいデータのみ取得可能

おけらのブログ++

駆け出しWebエンジニアの奮闘記

目次

GraphQLとは

RESTとの比較

Twitter REST API

Twitter GraphQL API

まとめ