しぶしぶGatsbyJSを始める3-Tutorial: 中級編 - 学習バンザイITエンジニアの精神安穏日記

※ 現在整理中です

個人用備忘録に付き、一旦非公開にしたのですが、たまにアクセスが有るようだったので、公開にしてます。

あんまりためにならないので、おすすめしません。

概要

公式サイトのチュートリアルを追いながら、初級編から始める。

ブログデータをAPIで取得してHTMLに出す

公式サイトの: Data in Gatsby | Gatsby

~~craetePagesは、GraphQL使わないでやるための仕組みらしい(?)~~ createPagesの詳細 Gatsby without GraphQL | Gatsby

使いまわしたいときの`siteMetadata`

複数のページで使いまわしたいデータ(タイトルなど)はgatsby-config.jsに仕込む。

この1ファイルのみを変更すれば良くなるで楽ですね。

例えばsrc/pages/about.jsで使いたいとき。

// 1. graphqlを import
import { graphql } from "gatsby"

// 2. { data }を引数にする
export default function About({ data }) {
  return (
// 3. dataから参照する
      <h1>About {data.site.siteMetadata.title}</h1>
  )
}

// queryを定義する
export const query = graphql`
  query {
    site {
      siteMetadata {
        title
      }
    }
  }

詳しい使い方についてはこちら Querying Data in Pages with GraphQL | Gatsby

static queryについて

pagenationないときは、StaticQueryを使うと良いらしい componentの関数の内側にconst定義していいみたい(なのでdataを受け取っていない)

import { useStaticQuery, graphql } from "gatsby"
export default function Layout({ children }) {
  const data = useStaticQuery(
    graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
      }
    `
  )
  return  {data.site.siteMetadata.title}
 )
}

GraphiQLを使う

http://localhost:8000/___graphql Gatsby developすると上記にアクセスして、色々試せる

Source plugins

dataはDBやAPIやCMSなど色んなとこからくる。それぞれの専用のpluginがある(はず)なので使いましょう。例えば - microCMSからデータ取得したいときは、gatsby-source-microcmsを使う - gatsby-source-filesystemは、file一覧を取得できる

例以下のようにすると、 src以下のファイルの情報を取得するGraphQLのqueryが作られるように成る。

  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `src`,
        path: `${__dirname}/src/`,
      },
    },

Transformer plugins

生markdownをGraphQLでいい感じにつかえるようにする

npm i --save gatsby-source-filesystemする

動的にページ生成するぞ Programmatically create pages from data | Gatsby

gatsby buildのときに、API叩いて、データ撮ってきて、自動でpagesを作っちゃうっていうやつ。ようやくここまできた。

A ‘slug’ is the unique identifying part of a web address

意味としては、pathと同じ。

2つのステップで、ページを作る 1. 対象のページ用のpathかslugを生成する 2. ページを生成する

1. 対象のページ用のpathかslugを生成する

onCreateNode and createPages

onCreateNode

onCreateNodeをgatsby-node.jsに記入する - nodeがcreate(or update)されたら呼ばれる(edgesのnode)

- `createNodeField`: 対象のnodeにfieldをを追加できる

{ 変数 } = obj について

const { createNodeField } = actions

これは、actionsからcreateNodeFieldを取得しているなので、actions.createNodeFieldと同じ。例えば、以下のようにslugを追加できる。

    createNodeField({
      node,
      name: `slug`,
      value: slug,
    })

   edges {
      node {
        fields {
          slug
        }
      }
    }

createPages

createPagesは、 - Query data with GraphQL - Map the query results to pages というわけで、GrqphQLでとってきた結果をpageにできるやつ

まとめ

ざっくりここまでくれば、だいたい開発できそう

概要