难以理解 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" 上作为示例。