GatsbyでのGraphQLの使い方

前回までの記事で、Gatsbyでページを作成する方法について学ぶことができました。

新しいページに文字と画像を表示できて、後はデザインを追加すれば、Gatsbyのウェブサイトは制作できてしまいます。ただ、このウェブサイトにたくさん新しいページを作りたくなった場合、少し話は変わってきます。

例えば、ブログの記事を書きたいときに、新しいページのために毎回コーディングする必要はないはずです。WordPressで記事を書いているときのように、記事だけ追加すればブログが更新されて欲しいと思いますよね。

こうした場合に、Gatsbyプロジェクト内部にあるファイルや情報、外部サービスとの連携を行えば、Gatsbyでできることの幅が大きく広がってきます。

今回は、そのようなデータを取得するためのベースとなるGraphQLの使い方の基本を説明していきます。

次回はこのGraphQLを利用して記事ページを生成する方法を説明していきます。

Gatsbyで利用するGraphQLとは？

GraphQLはクエリー言語(query language)の１つです。クエリー言語とは簡単に説明すると、どのようなデータが欲しいかを要求すれば、そのデータを取得できるようになるというものです。どのようなデータが欲しいかの指定をすることを、"クエリーする"と言ったりもしますね。

GraphQLはそのような言語の一種でFacebookが開発したものです。使い方はそんなに難しくないので安心してください。

GatsbyでGraphQLによってデータを取得するには？

GatsbyでデータをGraphQLで取得できるようにするには、プラグインを使うのが一番簡単です。ローカルにあるファイルを使うのか、外部のサービスを使うのかで、利用するプラグインが変わってきます。

このようなプラグインは、"gatsby-source-XXX"という名前がついています。gatsby-source-filesystemならローカルのファイルを引っ張って来れますし、gatsby-source-contentfulを使えば、ContentfulというCMS（コンテンツマネジメントシステム）からデータを引っ張ってこれるようになります。

どんなプラグインがあるかは、公式ページで"gatsby-source"と検索すれば良いでしょう。

Contentful and Gatsby

これらのプラグインを利用すると、データをそれらのサービスから持ってきて、GatsbyにあるGraphQL Data Layerというところに格納してくれます。ここに格納されたデータに対して、クエリーを作成することで、Gatsby内でデータを利用することができます。

GatsbyでのGraphiQLの使い方

GatsbyではGraphQL Data Layerにデータがあるということがわかりました。でもデータを引っ張ってくる前に、今現在、具体的にどのようなデータが取得できるのか、知りたいですよね。

GatsbyにはGraphiQLという機能があり、ローカル開発環境で特定のアドレスにアクセスすると、どのようなデータがあるのかが視覚的にわかるようになっています。

また、試しにクエリーを書いてみることで、クエリーが正しいのか確認したり、どのようなデータが返ってくるのかなど、いろいろ試すことができます。

GatsbyでGraphiQLを使うには、以下アドレスにアクセスします。

http://localhost:8000/___graphql

左側の [Explorer]をみると、GraphQL Data Layerにどのようなデータがあるのかがわかります。

青文字の項目は、データとして引っ張ってこれます。紫文字の項目はフィルターをするときに使うものと考えてください。

中央の"query MyQuery"と書いてあるのが、実際に使うクエリーです。このように、持ってきたいデータを指定して書くことで、そのデータを取得することができます。

難しそうに見えるかもしれませんが、欲しいデータが階層になって書かれているだけなので難しいことはありません。左側のExplorerにあるデータから欲しいデータを選んでクリックするだけで、クエリーが更新されます。

最後に、中央上にある再生ボタンのようなものを押すと、書かれているクエリーが実行され、右側に結果が表示されます。

コードを書いている時には、クエリーが間違っているかどうかはわかりにくいです。GraphiQLでデータが取得できているのを確認してから、そのクエリーをコピーしてコードに持っていくと、問題が切り分けしやすいです。

GatsbyでGraphQLからデータを引っ張ってみる

まずGraphQLからデータを持ってくるためには、２つ方法があります。１つはpage queryを利用する方法、もう１つはuseStaticQueryを利用する方法です。

page queryはそのコンポーネントが実際のページになるコンポーネントで利用できるクエリーです。index.jsやabout.jsなどのことですね。

useStaticQueryはそれ以外のコンポーネントで利用できます。例えば、レイアウトのヘッダーやフッターなどの、ページではないコンポーネントですね。

ただ、書く場所が少し変わるだけなので、同じように使うことができます。

Gatsbyのpage queryを利用する方法

page queryは、その名の通りページになるコンポーネントでしか使えません。今回はindex.jsでpage queryを利用してみましょう。

最初にすることはgraphqlをインポートすることです。これを利用することによって、この後に書いた文字列をGraphQLのクエリーとして認識してくれるようになります。

import { graphql } from 'gatsby'

次に実際のクエリーを書きます。今回はGatsbyのウェブサイト情報を取得してみましょう。これはgatsby-config.jsにあるsiteMetadataを取得するクエリーになります。siteMetadataには現在、以下のような情報が入っています。

# gatsby-config.js

module.exports = {
 siteMetadata: {
   siteurl: "https://localhost:8000",
   title: "GatsbyTutorial",
   description: "これはGatsbyの入門講座です",
   lang: "ja",
 },

GraphiQLの左側のExplorerから[site] -> [siteMetadata]からtitleとdescriptionにチェックマークを入れましょう。

siteMetadataに書いているデータが選べるようになっているのがわかると思います。

チェックを入れた後、中央の画面を見るとクエリーができています。このクエリーをコピーしてそのまま使うことができます。

クエリーをコピーして、以下のようにindex.js内のコンポーネントをexportする前に追加します。

ちなみに"MyQuery"というのはクエリーにつけることができる名前です。同じ名前を使ってしまうとエラーになるので、名前を変えるか消してしまいましょう。

# src/pages/index.js

...中略...

export const query = graphql`
query{
 site {
   siteMetadata {
     title
     description
   }
 }
}
`

export default TopPage​

最後に、クエリーによって得られたデータを、コンポーネントの中で利用します。データを利用するには、コンポーネントに{ data }というプロパティを追加することで取得できます。

const TopPage = ( { data }) => {
 return (
   <>
       <Layout pageTitle="TopPage">
           <h1>Hello World!</h1>
           <p>このサイトのtitleは{ data.site.siteMetadata.title}です</p>
           <p>このサイトのdescriptionは{ data.site.siteMetadata.description}です</p>

       </Layout>
   </>
 )
}
export default TopPage

JSXの中でdataを使うためには"{ }"で囲みます。各データを取得するには、クエリーと同じ順番に"."で区切って書いていきます。

この状態で実行すると、以下のような結果が得られます。siteMetadataのデータがちゃんと表示されていますね。

実行結果

Tutorial:GraphQL | 好かれるマーケティング研究室

GatsbyのuseStaticQueryを利用する方法

続いて、コンポーネントでuseStaticQueryを使ってみましょう。

今回はフッターに先程のpage queryと同じ情報を表示させてみます。以下の記事で作ったレイアウトのフッターを使います。

まずはsrc/components/footer.jsにuseStaticQueryとgraphqlをインポートします。

import { useStaticQuery, graphql } from 'gatsby'

page queryと異なるのは、コンポーネントの中にクエリーを書くことと、graphqlで書いたクエリーをuseStaticQueryに渡すことです。

# src/components/footer.js

import * as React from 'react'
import { useStaticQuery, graphql } from 'gatsby'

const Footer = () => {

const data = useStaticQuery(graphql`
   query{
     site {
       siteMetadata {
         title
         description
       }
     }
  }
`)
return (
    <div>
        <p>-------ここからフッターです-------</p>
        <p>{data.site.siteMetadata.title}</p>
        <p>{data.site.siteMetadata.description}</p>
    </div>
  )
}

export default Footer

dataには先程のpage queryと同じようにアクセスできます。

useStaticQueryは1つのファイルの中で1回しか使えないので、欲しいデータは一度のクエリーで全て取得しておきましょう。GraphiQLで必要なデータをクリックすれば、いくつものデータを一度に取得できます。

それではフッターを変更した状態で、トップページにアクセスしてみましょう。

フッターでもちゃんとデータを取得して表示していますね。

実装結果

Tutorial:StaticQuery | 好かれるマーケティング研究室

まとめ

GraphQLを使えるようになると、さまざまな外部サービスと連携することができるようになったり、プロジェクトの内部からデータを引っ張ってくることができるようになります。

次回はこのGraphQLを利用してブログ記事を生成できるようにしていきましょう。

続き↓

ここまで読んでいただけたなら、”スキ”ボタンを押していただけると励みになります！(*´ー｀*)ﾜｸﾜｸ