BETA

GatsbyJSの基本 2

投稿日:2019-10-13
最終更新:2019-10-13

前提

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が下記の設定になっていることを前提にしています。

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

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

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が使えるようになります。

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

npm install --save gatsby-source-filesystem  

gatsby-config.js

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のクエリで下記のようなものが書けるようになります。

{  
  allFile {  
    edges {  
      node {  
        relativePath  
      }  
    }  
  }  
}  
{  
  file {  
    id  
  }  
}  

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

transformer pluginについて

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

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

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

npm install --save gatsby-transformer-remark  
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のクエリで下記のようなものが書けるようになります。

{  
  allMarkdownRemark {  
  edges {  
    node {  
      id  
      excerpt  
    }  
  }  
}  
{  
  markdownRemark {  
    id  
  }  
}  

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

技術ブログをはじめよう Qrunch(クランチ)は、プログラマの技術アプトプットに特化したブログサービスです
駆け出しエンジニアからエキスパートまで全ての方々のアウトプットを歓迎しております!
or 外部アカウントで 登録 / ログイン する
クランチについてもっと詳しく

この記事が掲載されているブログ

hiko1129の技術ブログ

よく一緒に読まれる記事

0件のコメント

ブログ開設 or ログイン してコメントを送ってみよう