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

【问题标题】：Trouble understanding how graphql data is getting to react component无法理解 graphql 数据如何反应组件
【发布时间】：2020-01-06 00:25:04
【问题描述】：

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

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

【问题讨论】：

标签： graphql gatsby ghost-blog

【解决方案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”中作为示例。

【讨论】：