无法理解 graphql 数据如何反应组件

Question

我不确定反应组件是如何从这个库中的 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" 作为示例。

无法理解 graphql 数据如何反应组件

Trouble understanding how graphql data is getting to react component

graphql

gatsby

ghost-blog