GatsbyJSの基本 2

前提

Reactについて知っている。
GatsbyJSの基本 1相当を知っている。

GatsbyJSの基本 1の続きです。

GatsbyJSでデータを取得する方法について

GatsbyJSのデータ

GatsbyJSにおけるデータとは、「Reactコンポーネントの外側にあるすべてのもの」です。具体的には、Markdown、CSV、データベース、API等のことを指します。

GatsbyJSでデータを取得する場合は、基本的にGraphQLを使用します。

データを変換して利用する場合は、source plugin（例:gatsby-source-filesystem）やtransformer plugin（例:gatsby-transformer-remark）を使用します。

GatsbyJSでGraphQLを用いる方法は2つあります。
一つはpage queryで、もう一つはuseStaticQueryです。

以降のクエリの利用方法(page query、useStaticQuery)の例は、gatsby-config.jsが下記の設定になっていることを前提にしています。

1
2
3
4
5
6
module.exports = {
  siteMetadata: {
    title: `Title from siteMetadata`,
  },
  // 以下省略
}

GraphQLでクエリできる対象については、 http://localhost:8000/__graphql にアクセスすることでわかります。 source pluginやtransformer pluginを追加した際はサーバを再起動して確認すると追加されたクエリがわかります。

page query

下記のようにpages以下のファイル内でexport const queryといった形でgraphql関数にクエリを記載したものをexportすると、クエリが実行された結果がコンポーネントにdataオブジェクトとして注入されるようになります。gatsbyjsではこのクエリの使い方をpage queryと呼びます。

pages/about.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/Layout"

// ここでのdataはqueryの実行結果が注入されたもの
export default ({ data }) => (
  <Layout>
    <h1>About {data.site.siteMetadata.title}</h1>
  </Layout>
)

// 下記がpage query。これの実行結果がdataオブジェクトとしてpageコンポーネントに注入される。
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }
`

useStaticQuery

useStaticQueryは、ページ以外のコンポーネントで使用するものです。下記のように使用します。

components/Layout.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
import React from "react"
import { graphql, useStaticQuery } from "gatsby"

export default ({ children }) => {
  const data = useStaticQuery( // これ
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return (<div>
    <header>{data.site.siteMetadata.title}</header>
    {children}
  </div>)
}

source pluginについて

source pluginはなんらかのデータソースからデータを取得できるようにするものです。source pluginには、WordPress REST APIを使えるようにするgatsby-source-wordpressやローカルファイルシステムからのデータを提供するgatsby-source-filesystemなどがあります。

gatsby-source-filesystemはローカルファイルシステムからFileノードを作成してくれます。クエリとしてfileとallFileが使えるようになります。

以下に、簡単な例を示します。

1
npm install --save gatsby-source-filesystem

gatsby-config.js

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
module.exports = {
  // 省略
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    }
  ],
  // 省略
}

gatsby-source-filesystemをインストールしてgatsby-config.jsに上記のような設定をすることにより、src以下のものがクエリ対象に入ります。
一度サーバを再起動して http://localhost:8000/__graphql にアクセスしてみてください。allFileとfileのクエリが追加されているはずです。

allFileとfileのクエリが追加されているので、graphqlのクエリで下記のようなものが書けるようになります。

1
2
3
4
5
6
7
8
9
{
  allFile {
    edges {
      node {
        relativePath
      }
    }
  }
}

1
2
3
4
5
{
  file {
    id
  }
}

上で説明したpage queryやuseStaticQueryを使用することで、ファイル情報を表示することができます。

transformer pluginについて

transformer pluginは、source pluginからコンテンツを取得して変換します。transformer pluginには、markdownをHTMLに変換するgatsby-transformer-remark等があります。

gatsby-transformer-remarkは、MarkdownRemarkノードを作成します。クエリとしてmarkdownRemarkとallMarkdownRemarkが使えるようになります。

以下に、簡単な例を示します。

1
npm install --save gatsby-transformer-remark

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
module.exports = {
  // 省略
  plugins: [
    {
      resolve: `gatsby-source-filesystem`, // gatsby-source-filesystemがインストールされている前提です。
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-transformer-remark`
  ],
  // 省略
}

gatsby-transformer-remarkをインストールしてgatsby-config.jsに上記のような設定をすることにより、markdownRemarkとallMarkdownRemarkのクエリが追加されます。

一度サーバを再起動して http://localhost:8000/__graphql にアクセスして見てください。markdownRemarkとallMarkdownRemarkのクエリが追加されているはずです。

markdownRemarkとallMarkdownRemarkのクエリが追加されているので、graphqlのクエリで下記のようなものが書けるようになります。

1
2
3
4
5
6
7
8
9
{
  allMarkdownRemark {
  edges {
    node {
      id
      excerpt
    }
  }
}

1
2
3
4
5
{
  markdownRemark {
    id
  }
}

上で説明したpage queryやuseStaticQueryを使用することで、markdownをhtmlに変換したもの等、markdownの各種情報を表示することができます。