GatsbyJS データのソースと変換 チュートリアル part.5

ソースプラグイン

このチュートリアルは、ギャツビーのデータレイヤーについてのシリーズの一部です。ここに続く前に、パート4を終えたことを確認してください。

このチュートリアルの内容

このチュートリアルでは、GraphQLとソースプラグインを使ってGatsbyサイトにデータを取り込む方法を学びます。しかし、これらのプラグインについて学ぶ前に、GraphiQLと呼ばれる、クエリを正しく構造化するのに役立つツールの使い方を知っておきましょう。

GraphiQL入門

GraphiQLはGraphQL統合開発環境(IDE)です。ギャツビーサイトを構築しながら、よく使う強力な(万能な)ツールです。 あなたのサイトの開発サーバーが稼働している場合、通常は http://localhost:8000/___graphql でアクセスすることができます。

組み込みの Site "type" の周りを詮索して、どのようなフィールドが利用可能かを確認してください - 先ほど問い合わせた siteMetadata オブジェクトも含めて。GraphiQLを開いてデータで遊んでみてください Ctrl + Space(または代替のキーボードショートカットとしてShift + Spaceを使用)を押すとオートコンプリートウィンドウが表示され、Ctrl + Enterを押すとGraphQLクエリが実行されます。チュートリアルの残りの部分を通して、GraphiQLをもっとたくさん使うことになるでしょう。

GraphiQLエクスプローラーの使い方

GraphiQL Explorerを使用すると、利用可能なフィールドや入力をクリックしてインタラクティブに完全なクエリを構築することができ、手でクエリを入力するという反復的なプロセスを必要としません。

ソースプラグイン

ギャツビーサイトのデータは、どこからでも取得できます。API、データベース、CMS、ローカルファイルなど。

ソース プラグインはソースからデータを取得します。例えば、ファイルシステムソースプラグインはファイルシステムからデータを取得する方法を知っています。WordPressプラグインは、WordPress APIからデータを取得する方法を知っています。

gatsby-source-filesystemを追加して、その仕組みを調べてみましょう。
まず、プロジェクトのルートにプラグインをインストールします。
npm install --save gatsby-source-filesystem
そして、gatsby-config.jsに追加します。
gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `Pandas Eating Lots`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}

それを保存して、gatsby開発サーバを再起動します。そして再びGraphiQLを開きます。
エクスプローラペインでは、選択項目としてallFileファイルが表示されます。
allFile ドロップダウンをクリックします。クエリ領域のallFileの後にカーソルを置き、Ctrl + Enterと入力します。これは、各ファイルのIDに対するクエリを事前に埋めます。Play」を押してクエリを実行します。


エクスプローラペインでは、idフィールドが自動的に選択されています。フィールドの対応するチェックボックスをチェックして、より多くのフィールドの選択を行います。再生」を押すと、新しいフィールドで再度クエリが実行されます。

また、オートコンプリートショートカット(Ctrl + スペース)を使用してフィールドを追加することもできます。これにより、File ノードにクエリ可能なフィールドが表示されます。 クエリにフィールドの数を追加してみて、Ctrl + Enterを毎回押してクエリを再実行します。更新されたクエリの結果が表示されます。 結果は、ファイル「ノード」の配列です(ノードは「グラフ」内のオブジェクトの仮の名前です)。各ファイル・ノード・オブジェクトには、照会したフィールドがあります。

GraphQL クエリでページを構築する

Gatsbyを使った新しいページの構築は、GraphiQLで始まることが多いです。最初にGraphiQLで遊んでデータクエリをスケッチし、これをReactページコンポーネントにコピーしてUIの構築を開始します。

これを試してみましょう。

src/pages/my-files.js に、先ほど作成した allFile GraphQL クエリを指定して新規ファイルを作成します。

src/pages/my-files.js

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function MyFiles({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>Hello world</div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`
console.log(data)の行が上でハイライトされています。新しいコンポーネントを作成する際に、GraphQL クエリから取得したデータをコンソールに出力しておくと、UI を作成しながらブラウザのコンソールでデータを探索することができるので、便利なことがよくあります。 my-files/にある新しいページにアクセスして、ブラウザのコンソールを開くと、以下のようなものが表示されます。 データの形状がGraphQLクエリの形状と一致しています。
ファイルデータを印刷するためのコードをコンポーネントに追加します。
src/pages/my-files.js
import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"

export default function MyFiles({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1>My Site's Files</h1>
        <table>
          <thead>
            <tr>
              <th>relativePath</th>
              <th>prettySize</th>
              <th>extension</th>
              <th>birthTime</th>
            </tr>
          </thead>
          <tbody>
            {data.allFile.edges.map(({ node }, index) => (
              <tr key={index}>
                <td>{node.relativePath}</td>
                <td>{node.prettySize}</td>
                <td>{node.extension}</td>
                <td>{node.birthTime}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`
http://localhost:8000/my-filesを開きます。

次回のチュートリアル6は?

これで、ソースプラグインがどのようにしてデータをギャッツビーのデータシステムに持ち込むかがわかりました。

次のチュートリアルでは、トランスフォーマープラグインがソースプラグインからもたらされる生のコンテンツをどのように変換するかを学びます。
ソースプラグインとトランスフォーマープラグインを組み合わせることで、Gatsbyサイトを構築する際に必要となるデータソーシングとデータ変換をすべて処理することができます。

チュートリアルのパート6では、トランスフォーマープラグインについて学びます。

チュートリアルを進める >>