GatsbyJS GraphQLを使用してページのデータを照会する チュートリアル part.6

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

チュートリアルパート6の内容

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

plug-inの使い方

多くの場合、ソースプラグインから取得したデータのフォーマットは、あなたのウェブサイトを構築するために使用したいものではありません。 filesystem source プラグインではファイルに関するデータを問い合わせることができますが、ファイル内のデータを問い合わせたい場合はどうしたらいいでしょうか?

これを可能にするために、Gatsbyはソースプラグインから生のコンテンツを取り込み、より使いやすいものに変換するトランスフォーマープラグインをサポートしています。

例えば、マークダウンファイル。マークダウンは書き込めるのはいいけど、それを使ってページを作るときにはマークダウンをHTMLにしないといけない。
src/pages/sweet-pandas-eating-sweets.md

---
title: "Sweet Pandas Eating Sweets"
date: "2017-08-10"
---

Pandas are really sweet.

Here's a video of a panda eating sweets.


ファイルを保存したら、/my-files/をもう一度見てください-新しいマークダウンファイルはテーブルにあります。これはギャツビーの特徴でもあります。先ほどの siteMetadata の例のように、ソースプラグインはデータをライブリロードすることができます。 gatsby-source-filesystem は常に新しいファイルが追加されるかどうかをスキャンし、追加されたときにはクエリを再実行します。

markdownファイルを変換できるトランスフォーマープラグインを追加します。
npm install --save gatsby-transformer-remark
で、いつも通り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-transformer-remark`,
    `gatsby-plugin-emotion`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
  ],
}
開発サーバーを再起動してから、GraphiQLをリフレッシュ(または開き直し)して、オートコンプリートを見てください。 再びallMarkdownRemarkを選択し、allFileで行ったように実行します。そこには、最近追加したマークダウンファイルが表示されます。MarkdownRemarkノードで利用できるフィールドを調べます。 よし! うまくいけば、いくつかの基本的なことがうまくいき始めている。ソースプラグインはギャツビーのデータシステムにデータを持ち込み、トランスフォーマープラグインはソースプラグインが持ち込んだ生のコンテンツを変換します。
このパターンは、ギャツビーサイトを構築する際に必要となるデータソーシングとデータ変換をすべて処理することができます。

src/pages/index.js
でサイトのマークダウンファイルのリストを作成します。

あとは、フロントページのマークダウンファイルのリストを作成します。多くのブログと同じように、各ブログ記事を指し示すフロントページのリンクのリストで終わりにしたいものです。GraphQLを使用すると、Markdownブログ記事の現在のリストをクエリすることができるので、リストを手動で管理する必要はありません。 src/pages/my-files.jsのページと同様に、src/pages/index.jsを以下のように置き換えて、初期のHTMLとスタイリングを施したGraphQLクエリを追加します。
src/pages/index.js

import React from "react"
import { graphql } from "gatsby"
import { css } from "@emotion/core"
import { rhythm } from "../utils/typography"
import Layout from "../components/layout"

export default function Home({ data }) {
  console.log(data)
  return (
    <Layout>
      <div>
        <h1
          css={css`
            display: inline-block;
            border-bottom: 1px solid;
          `}
        >
          Amazing Pandas Eating Things
        </h1>
        <h4>{data.allMarkdownRemark.totalCount} Posts</h4>
        {data.allMarkdownRemark.edges.map(({ node }) => (
          <div key={node.id}>
            <h3
              css={css`
                margin-bottom: ${rhythm(1 / 4)};
              `}
            >
              {node.frontmatter.title}{" "}
              <span
                css={css`
                  color: #bbb;
                `}
              >
                — {node.frontmatter.date}
              </span>
            </h3>
            <p>{node.excerpt}</p>
          </div>
        ))}
      </div>
    </Layout>
  )
}

export const query = graphql`
  query {
    allMarkdownRemark {
      totalCount
      edges {
        node {
          id
          frontmatter {
            title
            date(formatString: "DD MMMM, YYYY")
          }
          excerpt
        }
      }
    }
  }
`
これでフロントページは以下のようになるはずです。 でも、あなたのブログの1記事はちょっと寂しい感じがしますね。で追加してみましょう。 src/pages/pandas-and-bananas.md
src/pages/pandas-and-bananas.md

---
title: "Pandas and Bananas"
date: "2017-08-21"
---

Do Pandas eat bananas? Check out this short video that shows that yes! pandas do seem to really enjoy bananas!


これは素晴らしい!ただし...投稿の順番が間違っています。 でも、これは簡単に直せます。何らかのタイプの接続を問い合わせる際には、さまざまな引数を GraphQL クエリに渡すことができます。ノードのソートやフィルタリング、スキップするノード数の設定、取得するノード数の上限の選択ができます。この強力な演算子のセットを使用すると、必要な形式で任意のデータを選択することができます。

インデックスページのGraphQLクエリで、allMarkdownRemarkをallMarkdownRemark(sort: { fields: [frontmatter___date], order: DESC })に変更します。注:フロントマッターと日付の間には3つのアンダースコアがあります。これを保存すると、ソート順が修正されるはずです。

GraphiQLを開いて、いろいろなソートオプションで遊んでみてください。allFile接続を他の接続と一緒に並べ替えることができます。

クエリ演算子の詳細については、GraphQL リファレンスガイドを参照してください。

チャレンジ

ブログ記事を含むページを新たに作ってみて、ホームページのブログ記事一覧がどうなるか見てみましょう

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

これはすごい!あなたのマークダウンファイルを照会し、ブログ記事のタイトルと抜粋のリストを作成している素敵なインデックスページを作成しました。しかし、単に抜粋を見るのではなく、マークダウンファイルのための実際のページが必要です。

src/pagesReact コンポーネントを配置することで、ページを作成し続けることができます。
しかし、次にデータからプログラムでページを作成する方法を学びます。 Gatsbyは、多くの静的サイトジェネレーターのようにファイルからページを作成することに限定されません。
Gatsbyを使用すると、GraphQLを使用してデータをクエリし、クエリ結果をページにマッピングすることができます。これは本当に強力なアイデアです。次のチュートリアルでは、データからページをプログラムで作成する方法を学びます。

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