• 商品一覧
  • お問合せ
  • ブログ記事
お仕事の依頼
好かれるマーケティング研究室のデフォルトサムネイル画像

GatsbyでのGraphQLの使い方

2021-11-12
前回までの記事で、Gatsbyでページを作成する方法について学ぶことができました。
新しいページに文字と画像を表示できて、後はデザインを追加すれば、Gatsbyのウェブサイトは制作できてしまいます。ただ、このウェブサイトにたくさん新しいページを作りたくなった場合、少し話は変わってきます。
例えば、ブログの記事を書きたいときに、新しいページのために毎回コーディングする必要はないはずです。WordPressで記事を書いているときのように、記事だけ追加すればブログが更新されて欲しいと思いますよね。
こうした場合に、Gatsbyプロジェクト内部にあるファイルや情報、外部サービスとの連携を行えば、Gatsbyでできることの幅が大きく広がってきます。
今回は、そのようなデータを取得するためのベースとなるGraphQLの使い方の基本を説明していきます。
次回はこのGraphQLを利用して記事ページを生成する方法を説明していきます。

Gatsbyで利用するGraphQLとは?

GraphQL GraphQL トップ
GraphQLはクエリー言語(query language)の1つです。クエリー言語とは簡単に説明すると、どのようなデータが欲しいかを要求すれば、そのデータを取得できるようになるというものです。どのようなデータが欲しいかの指定をすることを、"クエリーする"と言ったりもしますね。
GraphQLはそのような言語の一種でFacebookが開発したものです。使い方はそんなに難しくないので安心してください。

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

GatsbyでデータをGraphQLで取得できるようにするには、プラグインを使うのが一番簡単です。ローカルにあるファイルを使うのか、外部のサービスを使うのかで、利用するプラグインが変わってきます。
このようなプラグインは、"gatsby-source-XXX"という名前がついています。gatsby-source-filesystemならローカルのファイルを引っ張って来れますし、gatsby-source-contentfulを使えば、ContentfulというCMS(コンテンツマネジメントシステム)からデータを引っ張ってこれるようになります。
どんなプラグインがあるかは、公式ページで"gatsby-source"と検索すれば良いでしょう。
これらのプラグインを利用すると、データをそれらのサービスから持ってきて、GatsbyにあるGraphQL Data Layerというところに格納してくれます。ここに格納されたデータに対して、クエリーを作成することで、Gatsby内でデータを利用することができます。

GatsbyでのGraphiQLの使い方

GatsbyではGraphQL Data Layerにデータがあるということがわかりました。でもデータを引っ張ってくる前に、今現在、具体的にどのようなデータが取得できるのか、知りたいですよね。
GatsbyにはGraphiQLという機能があり、ローカル開発環境で特定のアドレスにアクセスすると、どのようなデータがあるのかが視覚的にわかるようになっています。
また、試しにクエリーを書いてみることで、クエリーが正しいのか確認したり、どのようなデータが返ってくるのかなど、いろいろ試すことができます。
GatsbyでGraphiQLを使うには、開発サーバーを起動して以下アドレスにアクセスします。
npm run develop
左側の [Explorer]をみると、GraphQL Data Layerにどのようなデータがあるのかがわかります。
青文字の項目は、データとして引っ張ってこれます。紫文字の項目はフィルターをするときに使うものと考えてください。
中央の"query MyQuery"と書いてあるのが、実際に使うクエリーです。このように、持ってきたいデータを指定して書くことで、そのデータを取得することができます。
難しそうに見えるかもしれませんが、欲しいデータが階層になって書かれているだけなので難しいことはありません。左側のExplorerにあるデータから欲しいデータを選んでクリックするだけで、クエリーが更新されます。
最後に、中央上にある再生ボタンのようなものを押すと、書かれているクエリーが実行され、右側に結果が表示されます。
Gatsby GraphiQLクエリー実行
Gatsby GraphiQLクエリー実行結果
コードを書いている時には、クエリーが間違っているかどうかはわかりにくいです。GraphiQLでデータが取得できているのを確認してから、そのクエリーをコピーしてコードに持っていくと、問題が切り分けしやすいです。

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

まずGraphQLからデータを持ってくるためには、2つ方法があります。1つはpage queryを利用する方法、もう1つは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にチェックマークを入れましょう。
Gatsby GraphiQLからメタデータを取得
siteMetadataに書いているデータが選べるようになっているのがわかると思います。
チェックを入れた後、中央の画面を見るとクエリーができています。このクエリーをコピーしてそのまま使うことができます。
Gatsby GraphiQLからメタデータを取得するクエリー
クエリーをコピーして、以下のように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のデータがちゃんと表示されていますね。
Gatsbyウェブサイトでメタデータを表示

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で必要なデータをクリックすれば、いくつものデータを一度に取得できます。
それではフッターを変更した状態で、トップページにアクセスしてみましょう。
GatsbyウェブサイトでメタデータをuseStaticQueryで表示
フッターでもちゃんとデータを取得して表示していますね。

まとめ

GraphQLを使えるようになると、さまざまな外部サービスと連携することができるようになったり、プロジェクトの内部からデータを引っ張ってくることができるようになります。
次回はこのGraphQLを利用してブログ記事を生成できるようにしていきましょう。

無料メルマガ

今すぐもっと好かれる!

プロフィール

西松 大輝:マーケティング・サイエンティスト

数字から愛へ
・「何を変えるか?」を行動経済学・TOCLSSで分析する。
・「何を伝えるか?」を戦略・マーケティングで明確にする。
・「何を測定するか?」を機械学習・ITで支援する。

"全部"やらなくっちゃあならないってのが 「マーケティング・サイエンティスト」のつらいところだな。
覚悟はいいか?僕はできてる
  • お仕事の依頼
  • お問合せ
  • プライパシーポリシー
  • 特定商取引法に基づく表記
2019-2022, 好かれるマーケティング研究室©