graphql - 无法理解 graphql 数据如何 react 组件

Question

我不确定 react 组件如何从这个库中的 graphql 获取数据(或一般)。我在看 https://github.com/TryGhost/gatsby-starter-ghost在 src/templates/post.js 这样的地方，底部有一个图形查询，说明如何将数据传递到组件中。

我在网上到处寻找关于此的文档，但我似乎找不到任何文档。

Answer 1

简化的过程(显然省略了一些步骤)几乎就是创建一个 slug 来填充您开发的模板上的数据。可以在此处找到更多信息:

https://www.gatsbyjs.org/tutorial/part-seven/

例子:

import React from "react"
import { graphql } from "gatsby"
import Layout from "../components/layout"
export default ({ data }) => {
  const post = data.markdownRemark
  return (
    <Layout>
      <div>
        <h1>{post.frontmatter.title}</h1>
        <div dangerouslySetInnerHTML={{ __html: post.html }} />
      </div>
    </Layout>
  )
}
export const query = graphql`
  query($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      html
      frontmatter {
        title
      }
    }
  }
`

查询在底部。它会查找 slug，然后获取相关的 GraphQL 信息并将其填充到模板“post.js”中作为示例。