【GraphQL】必要最小限で使い方を覚える

GatsbyJSを使う中で避けて通ることができないGraphQL。用意されているテーマを使いたいだけなら、理解しなくても問題ないですが、自分でテーマを作成したい場合やカスタマイズしたい場合は、理解していないと難しいと思います。
詳細に説明している記事等はたくさんあるため、本記事では、GatsbyJSを使うにあたり必要最小限の知識だけを書いていきたいと思います。

GraphQLとは何か簡単に

正式に言うと、「APIのためのクエリ言語」です。なに?こんな説明では分からない?
ですよね。もう少し分かりやすく説明すると、「データを取得/更新する新しい方法」ぐらいに覚えてもらうといいかと思います。
で、もう少し詳しく説明すると、GraphQLは、事前にデータの構造を定義しておいて(スキーマと言う。)、それに対して問い合わせ(クエリと言う。)を発行することで、データを取得することができます。

データを取得する簡単な例を紹介します。
まず、以下のようなクエリを発行します。これは、「GetFruits」という名前のクエリで、フルーツのidとnameを取得しようとしています。

query GetFruits {
  fruits {
    id
    name
  }
}

すると、以下のようなJSONデータ形式のデータを含んだレスポンスが返ってきます。

{
  "data": {
    "fruits": {
      "id": 1,
      "name": "Orange"
    }
  }
}

どうです?クエリとそのレスポンスの構造が似ていると思いませんか?
これがGraphQLの特徴になります。

GatsbyJSでMarkdownの記事情報GraphQLで取得する

まず、全体像は下記になります。

const IndexPage = ({data}) => (
  <Layout>
    <h1>
     { data.markdownRemark.frontmatter.title }
    </h1>  
  </Layout>
)

export const query = graphql`
  query IndexQuery {
    markdownRemark(id: {eq: "7d3de65e-215d-59db-9df7-85fdbc0de56f"}){
      id
      frontmatter{
        title
        category
      }
    }
  }
`

「IndexQuery」と言う名前で、「markdownRemark」に対してクエリを発行しています。markdownRemark(id: {eq: "85fdbc0de56f"})これは、「id」が「85fdbc0de56f」であるデータを取得するという意味です。GraphQLでは、条件を指定してデータを取得することができます。

export const query = graphql`
  query IndexQuery {
    markdownRemark(id: {eq: "7d3de65e-215d-59db-9df7-85fdbc0de56f"}){
      id
      frontmatter{
        title
        category
      }
    }
  }
`

GatsbyJSでは、クエリのレスポンスはdataに格納されます。従って、dataを引数として渡してあげればJSONのようにそのデータを利用することができます。

const IndexPage = ({data}) => (
  <Layout>
    <h1>
     { data.markdownRemark.frontmatter.title }
    </h1>  
  </Layout>
)

GraphQLを使ってみる

GatsbyJSなら、$ yarn run developをした後、http://localhost:8000/___graphqlにアクセスすると以下のような画面にアクセスできます。

graphlの画面

左の欄が「クエリ」を記載する場所、中央の欄がそのクエリに対する「レスポンスのデータ」、右の欄がスキーマに関する情報。
右の欄のスキーマ情報をもとにクエリを書いて、データを取得するとどのような形でデータが取得できるか簡単にシュミレーションすることができます。実際に手を動かして理解したい場合にとても便利です。

これで以上になります。まだまだGraphQLは色々な機能がありますが、今回解説した内容で最悪、使うことができると思います。使いながら新たな機能を習得していきましょう。それでは。

arrow_back

Previous

【rails】deviseで実現するユーザ認証機能

Next

【はじめてのTerraform】 環境構築とEC2のセットアップ
arrow_forward