GatsbyJS GraphQLを使ってデータを取得する

2019-06-10

GraphQLを使ってデータを取得する

Facebookが開発したクエリ言語「GraphQL」を利用してデータの取得を行います。

共通データを「gatsby-config.js」から取得する

title、descriptionなどのサイト情報を共通のデータとして、gatsby-config.jsに記述し、ページの表示時に取得してみます。

  1. まずは共通データの記述 「gatsby-config.js」の「module.exports」内に「siteMetadata」を追加し、title、descriptionを記述します。
module.exports = {
  /* Your site config here */
  siteMetadata: {
    title: 'タイトル',
    description: '説明分',
  },
}
  1. GraphQLの実行
    データの取得と表示のため、「index.js」に以下のように記述を行います。

    1. graphqlのインポート
    2. GraphQLの実行結果をqueryに格納
    3. コンポーネントでGraphQLの結果を受け取り、表示する
import React from "react"

// 1. graphqlのインポート
import { graphql } from "gatsby"

// 3. 2の結果がdataに自動的に渡されてくる
export default ({data}) => {
    //dataの内容を表示してみる
    console.log(data);
    return(
        <div>
            <h1>title:{data.site.siteMetadata.title}</h1>
            <div>description:{data.site.siteMetadata.description}</div>
        </div>
    )
}

// 2.siteMetadataの中からtitleとdescriptionを取得する
export const query = graphql`
    query {
        site {
            siteMetadata {
                title
                description
            }
        }
    }
`

ブラウザで確認すると、siteMetadataの結果が画面に表示されます。

gatsby_graphqg_1.png

また、コンポーネント内のconsole.log(data)の結果は以下の様にオブジェクト形式で取得されていることが確認できます。

gatsby_graphqg_2.png

ただし、この方法はURLに対応したコンポーネント(pagesディレクトリ配下のコンポーネントなど)でのみ利用できます。

共通コンポーネントでGraphQLを実行する

URLに対応していない共通コンポーネント(Headerなど)でGraphQLを実行するには「useStaticQuery」を利用します。

src/components/Header.jsを作成し、以下の様に記述します。

  1. useStaticQuery、graphqlのインポート
  2. useStaticQueryを使いgraphqlを実行して、dataに格納
  3. dataの内容を表示する
  4. index.jsでHeaderを表示する
// Header.js
import React from "react"
//1. useStaticQuery、graphqlのインポート
import { useStaticQuery,  graphql } from "gatsby"

export const Header= () => {
  // 2. useStaticQueryを使いgraphqlを実行して、dataに格納
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title          
          }
        }
      }
    ` 
  )

  //dataの内容を表示してみる
  console.log(data);

  return (
    // 3. dataの内容を表示する
    <h1>{data.site.siteMetadata.title}</h1>
  )
}
//index.js
import React from "react"
import {Header} from "../components/Header";

export default () => {
    // 4. index.jsでHeaderを表示する
    return(
        <div>
            <Header></Header>
        </div>
    )
}

Header.jsの内容が表示されていることが確認できます。

gatsby_graphqg_3.png

また、Header.jsのconsole.log(data)の結果も同様のオブジェクトになっていることが確認できます(useStaticQueryでtitleしか取得していないため、オブジェクトの内容もtitleのみとなっています)。

gatsby_graphqg_4.png

■同じタグの記事(最新5件)
GatsbyJS FaunaDBからデータを取得する
GatsbyJS 検索機能を実装する(JsSearchを利用)
GatsbyJS PostgreSQLの内容を取得する
GatsbyJS rehypeReactでマークダウンの内容を変更する
GatsbyJS マークダウンにコンポーネントを表示する
■同じタグの記事を見る