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

查询位于底部。它会查找该段，然后获取相关的GraphQL信息，然后将其填充到模板“ post.js”中。

难以理解graphql数据如何开始响应组件

1 个答案: