gatsby의 작업 내역

gatsby 입문 자습서를 다루는 0. 개발 환경 설정
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (1)
gatsby 입문 튜토리얼을 해내다 1. 개츠비 빌딩 블록에 대해 알아 (2)
gatsby 입문 자습서 2. 개츠비 스타일링 개요
gatsby 시작하기 튜토리얼 3. 중첩 된 레이아웃 구성 요소 만들기
gatsby 입문 자습서 4. 개츠비 데이터
이번: gatsby 입문 튜토리얼을 해내 5. 소스 플러그인과 쿼리 된 데이터의 렌더링
gatsby 입문 튜토리얼을 해낸다 6. 변압기 플러그인※Transformer plugins의 google 번역
gatsby 입문 튜토리얼을 다루는 7. 프로그램으로 데이터로부터 페이지를 작성한다
gatsby 입문 자습서 8. 게시할 사이트 준비
gatsby 입문 블로그 만들어서 서버에 올려보자

튜토리얼

이번에 실시하는 gatsby의 튜토리얼은 이쪽
htps //w w. tsbyys. 코 m/트리어 l/파 rt-후우ょぇ/
GraphQL과 소스 플러그인을 사용하여 Gatsby 사이트로 데이터를 캡처하는 방법을 이해할 수 있습니다.
그러고 보니 지난번 GraphQL에 대해 그다지 잘 이해할 수 없었구나.
글쎄요. 아무것도 돌진한 뒤에 이해하고 있다. 그것이 내 방식. 솔레가 올레노야 리카타. 소레카오레노리타카타.
빨리 가자.
소스는 지난번 만든 사람을 사용합니다.

Source Plugins

Introducing GraphiQL

GraphiQL은 GraphQL 통합 개발 환경(IDE)
다음에 액세스할 수 있으면 사용할 수 있습니다.http://localhost:8000/___graphql
접근할 수 있었다. 뭐야 이거.
이전과 비슷한 쿼리를 만들어 봅니다.
site→siteMetadata→title을 체크하면 쿼리가 되어 실행하면, 타이틀을 취득할 수 있었다!

과연, 데이터 취득하기 쉽다.
SQL 구축과 비슷하지 마라. 복잡한 것은 할 수 없을 것 같습니다.

Source plugins

아무래도 데이터가 좋은 느낌으로 페치되기 때문에 gatsby-source-filesystem을 추가해 확인하는 것 같다.
다음을 프로젝트 디렉토리에서 실행npm install --save gatsby-source-filesystemgatsby-config.js를 다음과 같이 수정

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`,
      },
    },
  ],
}

재부팅

응? 이전부터 있었구나. 최근 gatsby는 표준 장비인가?
allFile을 클릭하고 Ctrl+Enter를 누르면 실행 결과까지 나온다.

뭔가 나왔다.
accessTime 및 base를 선택하고 실행

파일 이름과 날짜가 나왔다!

Build a page with a GraphQL query

튜토리얼에 이하와 같은 기재 ※아마 중요

Gatsby를 사용하여 새 페이지를 만드는 것은 종종 GraphiQL로 시작합니다. 먼저 GraphiQL에서 플레이하여 데이터 쿼리를 스케치하고 React 페이지 구성 요소에 복사하여 UI 빌드를 시작합니다.

※google 번역입니다.
과연.
GraphQL을 사용하여 새 페이지 src/pages/my-files.js를 만듭니다.

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)
        }
      }
    }
  }
`
↑ここまで

화면 표시에서 튜토리얼의 로그 같은 것이 나왔기 때문에 OK입니다.
추가 수정

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>
        ↓ここから
        <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)
        }
      }
    }
  }
`

OK 나왔다 나왔다.
반복 처리는 람다 같은 쓰는 법.
이 튜토리얼은 이상.

이번은 여기까지.

고마워요.