盖茨比的工作记录

gatsby入门 教程学习 0. 配置开发环境
gatsby入门 教程学习 1. 了解 Gatsby 构建块（1）
gatsby入门 教程学习 1. 了解 Gatsby 构建块（2）
gatsby入门 教程学习 2. Gatsby 的样式化概述
gatsby入门 教程学习 3. 创建嵌套的布局组件
gatsby入门 教程学习 4. Gatsby 的数据
本次：gatsby入门 教程学习 5. 渲染源插件和查询到的数据
gatsby入门 教程学习 6. 变换器插件
gatsby入门 教程学习 7. 使用程序从数据创建页面
gatsby入门 教程学习 8. 准备发布网站
尝试创建 Gatsby 博客并上传到服务器

教程

這次我們將進行gatsby的新手教程，點擊這裡 https://www.gatsbyjs.com/tutorial/part-five/
這個教程將教你如何使用GraphQL和源插件將數據導入Gatsby站點中。
說起來，上次我對GraphQL的理解並不是很好。
也罷，無妨。我總是在一路向前之後才能理解事物。這就是我的方式。這就是我的做事方法。
現在就開始吧。
我們將使用上次創建的源。

源插件

介绍 GraphiQL

来源插件

由于数据的提取似乎很顺利，所以需要添加gatsby-source-filesystem并进行确认。
在项目目录中执行以下步骤：
npm install –save gatsby-source-filesystem
将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`,
      },
    },
  ],
}

用GraphQL查询构建一个页面

在教程中提到以下内容※可能很重要

通常情况下，使用Gatsby创建新页面的过程始于GraphiQL。首先，在GraphiQL中尝试并勾勒出数据查询，然后将其复制到React页面组件中，并开始构建界面。

使用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>
  )
}
↓これがgraphql
export const query = graphql`
  query {
    allFile {
      edges {
        node {
          relativePath
          prettySize
          extension
          birthTime(fromNow: true)
        }
      }
    }
  }
`
↑ここまで

因为画面上显示出了类似于教程记录的东西，所以应该是可以的。另外再进行修正。

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)
        }
      }
    }
  }
`

这次就到这里吧。

非常感谢您。