【Gatsby × contentful】遅延静的生成 (DSG)の使い方

Copy
{
  "dependencies": {
    "@babel/preset-react": "^7.17.12",
    "@emotion/babel-plugin": "^11.9.2",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "@mdx-js/mdx": "1.6.22",
    "@mdx-js/react": "1.6.22",
    "dotenv": "^16.0.2",
    "gatsby": "^4.14.1",
    "gatsby-plugin-emotion": "^7.14.0",
    "gatsby-plugin-feed": "^4.14.0",
    "gatsby-plugin-gatsby-cloud": "^4.14.0",
    "gatsby-plugin-google-analytics": "^4.14.0",
    "gatsby-plugin-image": "^2.24.0",
    "gatsby-plugin-manifest": "^4.14.0",
    "gatsby-plugin-mdx": "3.20.0",
    "gatsby-plugin-offline": "^5.14.1",
    "gatsby-plugin-react-helmet": "^5.14.0",
    "gatsby-plugin-sharp": "^4.14.1",
    "gatsby-remark-copy-linked-files": "^5.14.0",
    "gatsby-remark-images": "^6.14.0",
    "gatsby-remark-prismjs": "^6.14.0",
    "gatsby-remark-responsive-iframe": "^5.14.0",
    "gatsby-remark-smartypants": "^5.14.0",
    "gatsby-source-contentful": "^7.21.1",
    "gatsby-source-filesystem": "^4.14.0",
    "gatsby-transformer-sharp": "^4.14.0",
    "prismjs": "^1.28.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-helmet": "^6.1.0",
    "typeface-merriweather": "0.0.72",
    "typeface-montserrat": "0.0.75"
  },
  "devDependencies": {
    "prettier": "^2.6.2"
  },
}

Copy
.
|-- pages
|   |-- 404.js
|   |-- about.jsx
|   |-- index.jsx
|   |-- using-typescript.tsx

Copy
import * as React from "react"
import { Link, graphql } from "gatsby"

// 記事一覧ページ
const BlogIndex = ({ data }) => {
  const nodeList = data.allContentfulBlogPost.edges

  return (
    <div>
      {nodeList.map(({ node }) => {
        return (
          <div>
            <Link to={node.slug}>{node.title}</Link>
          </div>
        )
      })}
    </div>
  )
}

export default BlogIndex

// contentfulから情報取得
export const pageQuery = graphql`
  query {
    allContentfulBlogPost {
      edges {
        node {
          title
          slug
        }
      }
    }
  }
`

// DSGの設定関数
export async function config() {
  return () => {
    return {
      defer: true,
    }
  }
}

Copy
Pages

┌ src/pages/404.js
│ ├   /404/
│ └   /404.html
├ src/pages/about.jsx
│ └   /about/
├ src/pages/index.jsx
│ └ D /

  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │   (SSG) Generated at build time                                │
  │ D (DSG) Deferred static generation - page generated at runtime │
  │ ∞ (SSR) Server-side renders at runtime (uses getServerData)    │
  │ λ (Function) Gatsby function                                   │
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯

Copy
gatsby serve
⠀
You can now view gatsby-starter-blog in the browser.
⠀
  http://localhost:9000/

Copy
.
`-- templates
    `-- contentfulPost.jsx

Copy
const path = require(`path`)

exports.createPages = async ({ graphql, actions }) => {
  const { createPage } = actions

  // contentful記事のkeyを取得
  const contentfulAirticleResult = await graphql(`
    query airticleQuery {
      allContentfulBlogPost {
        edges {
          node {
            slug
          }
        }
      }
    }
  `)

  const contentfulAirticle =
    contentfulAirticleResult.data.allContentfulBlogPost.edges
  //記事数分ループして記事ページを作成する
  contentfulAirticle.forEach(({ node }) => {
    createPage({
      path: `${node.slug}/`, //記事ページのurl
      component: path.resolve(`./src/templates/contentfulPost.jsx`), //記事ページ作成のtemplateコンポーネント
      //templateコンポーネントに渡す引数
      context: {
        slug: node.slug,
      },
      defer: true,
    })
  })
}

Copy
Pages

┌ src/templates/contentfulPost.jsx
│ ├ D /gatsby-contentful-page-filesystemrouteapi/
│ └ D ...157 more pages available
├ src/pages/404.js
│ ├   /404/
│ └   /404.html
├ src/pages/about.jsx
│ └   /about/
├ src/pages/index.jsx
│ └ D /
└ src/pages/using-typescript.tsx
  └   /using-typescript/

  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │   (SSG) Generated at build time                                │
  │ D (DSG) Deferred static generation - page generated at runtime │
  │ ∞ (SSR) Server-side renders at runtime (uses getServerData)    │
  │ λ (Function) Gatsby function                                   │
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯

Copy
|-- pages
|   |-- 404.js
|   |-- about.jsx
|   |-- index.jsx
|   |-- using-typescript.tsx
|   `-- {ContentfulBlogPost.slug}.jsx

Copy
import React from "react"
import { graphql, Link } from "gatsby"
import MDXConvert from "../components/mdxConvert"

const ContentfulPost = ({ data }) => {
  const post = data.allContentfulBlogPost.edges[0].node
  const { body } = post

  return (
    <div>
      <MDXConvert>{body.childMdx.body}</MDXConvert>
    </div>
  )
}

export default ContentfulPost

// gatsby-node.jsのcreatePageから渡されたslugを元にGraphQLで記事と
// その目次データ取得する
export const query = graphql`
  query Query($slug: String!) {
    allContentfulBlogPost(filter: { slug: { eq: $slug } }) {
      edges {
        node {
          body {
            childMdx {
              tableOfContents
              body
            }
          }
        }
      }
    }
  }
`

//deferキーを持つオブジェクトを返す非同期関数config
export async function config() {
  return () => {
    return {
      defer: true,
    }
  }
}

Copy
Pages

┌ src/pages/404.js
│ ├   /404/
│ └   /404.html
├ src/pages/about.jsx
│ └   /about/
├ src/pages/index.jsx
│ └ D /
├ src/pages/using-typescript.tsx
│ └   /using-typescript/
└ src/pages/{ContentfulBlogPost.slug}.jsx
  ├ D /gatsby-contentful-page-filesystemrouteapi/
  └ D ...157 more pages available

  ╭────────────────────────────────────────────────────────────────╮
  │                                                                │
  │   (SSG) Generated at build time                                │
  │ D (DSG) Deferred static generation - page generated at runtime │
  │ ∞ (SSR) Server-side renders at runtime (uses getServerData)    │
  │ λ (Function) Gatsby function                                   │
  │                                                                │
  ╰────────────────────────────────────────────────────────────────╯