Gatsbyノート2(Markdown/GraphQL Playground)

14829 ワード
GraphQL gatsby GraphQL テキストリンク

参考

学習内容

  • 1.Markdownを利用する準備

  • 2.GraphQL Playgroundの導入

  • 3.Markdownをデータとして利用する

1.Markdownを利用する準備

プラグインのインストール(3つ)

⑴ gatsby-transformer-remark

yarn add gatsby-transformer-remark

⑵ gatsby-remark-images

yarn add gatsby-remark-images gatsby-plugin-sharp

⑶ gatsby-remark-relative-images

yarn add gatsby-remark-relative-images

gatsby.config.jsに追記(プラグイン3つ分)

  • gatsby-source-filesystemのoptionに取得するデータを追記する
gatsby.config.js

module.exports = {
  siteMetadata: {
    title: `Gatsby Default Starter`,
    description: `Kick off your next, great Gatsby project with this default starter. This barebones starter ships with the main Gatsby configuration files you might need.`,
    author: `@gatsbyjs`,
  },
  plugins: [
    `gatsby-plugin-sass`,
    `gatsby-plugin-react-helmet`, //gatsby-starter-defaultでは既に設定されている
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
//追記 /postのmdファイルを扱う為追記
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `posts`,
        path: `${__dirname}/src/posts`,
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `gatsby-starter-default`,
        short_name: `starter`,
        start_url: `/`,
        background_color: `#663399`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `src/images/gatsby-icon.png`, // This path is relative to the root of the site.
      },
    },
// 追加 gatsby-transformer-remark
// https://www.gatsbyjs.com/plugins/gatsby-transformer-remark/?=remark
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        // CommonMark mode (default: true)
        commonmark: true,
        // Footnotes mode (default: true)
        footnotes: true,
        // Pedantic mode (default: true)
        pedantic: true,
        // GitHub Flavored Markdown mode (default: true)
        gfm: true,
        // Plugins configs
        plugins: [],
      },
    },
// 追加 gatsby-remark-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-images/?=remark
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
// 追加 gatsby-remark-relative-images
// https://www.gatsbyjs.com/plugins/gatsby-remark-relative-images/?=remark%20re
    // Add static assets before markdown files
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/images`,
        name: 'images',
      },
    },
    {
      resolve: 'gatsby-source-filesystem',
      options: {
        path: `${__dirname}/src/pages`,
        name: 'pages',
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          // gatsby-remark-relative-images must
          // go before gatsby-remark-images
          {
            resolve: `gatsby-remark-relative-images`,
          },
          {
            resolve: `gatsby-remark-images`,
            options: {
              // It's important to specify the maxWidth (in pixels) of
              // the content container as this plugin uses this as the
              // base for generating different widths of each image.
              maxWidth: 590,
            },
          },
        ],
      },
    },
  ],
}

2.GraphQL Playgroundの導入

package.json
    "develop": "GATSBY_GRAPHQL_IDE=playground gatsby develop"

開発サーバーがhttp：// localhost：8000 / ___ graphqlで実行されているときに、gatsby developではなくnpm run developを使用してアクセスする

3.Markdownをデータとして利用する

  • データを用意する
  • クエリーを書き、取得できるデータを確認する
  • クエリーをコード側へコピーする
src/posts/blog-001.md

---
title: "タイトル　001"
date: "2020-04-04"
thumbnail: "../images/image_001.jpg"
---

Gatsbyブログ作成チュートリアル001
![Sample](../images/image_001.jpg)
## topic

1. list1
2. list2
3. list3
  • gatsby-source-filesystemのoptionで指定したpathのデータを取得できる
  • allMarkdownRemark > edges > node > frontmatter
    • title
    • date
    • thumbnail

index.js

import { graphql, useStaticQuery } from "gatsby" //追加

const IndexPage = () => {
  const data = useStaticQuery(graphql`
    query {
      allMarkdownRemark {
        edges {
          node {
            frontmatter {
　　　　　　　 date
              title
              thumbnail {
　　　　　　　　　name
　　　　　　　 }
            }
          }
        }
      }
    }
  `)
  return (
//使用コンポーネント
  )
}