Gatsby + Markdown：GraphQL 查询呈现为组件，但在导入页面时不呈现

Question

我有一个读取 md 文件并呈现 HTML:

的简单组件

import React from "react"
import { graphql } from "gatsby"

const IndexPage = ({ data }) => {
  console.log(data)
  const createMarkup = { __html: data.allMarkdownRemark.edges[0].node.html }
  return (
    <>
      <h1>test start</h1>
      <p>
        <div dangerouslySetInnerHTML={createMarkup} />
      </p>
      <h1>test end</h1>
    </>
  )
}

export default IndexPage

export const pageQuery = graphql`
  query MyQuery {
    allMarkdownRemark {
      edges {
        node {
          html
        }
      }
    }
  }
`

像“localhost:8000/components/index_page”这样访问时效果很好

然后我尝试像这样非常简单地将它导入页面：

import React from "react"
import Header from "./components/header"
import Nav from "./components/nav"
import Footer from "./components/footer"
import { Container, Row, Col } from "react-bootstrap"
import IndexPage from "./components/index_page" <----- THIS

export default function PHBOGFC() {
  return (
    <div>
      <IndexPage /> <------ HERE
      <Header />
      <Nav />
      <Container fluid></Container>
      <img
        src="/phbogfc.svg"
        alt="The Preposterously Huge Book of Google Font Combinations"
      />
      <Footer />
    </div>
  )
}

但是我在浏览器中得到了这个错误，而不是我在直接访问组件时通常得到的输出：

我缺少什么步骤或命令？如果一个组件本身可以很好地呈现，为什么导入到另一个页面（组件）时它不能呈现？

Answer 1

在您的 IndexPage 组件中，您使用的是 page query，它仅适用于页面（因此得名）组件。

在 localhost:8000/components/index_page 处呈现组件的唯一方法是创建一个像 /src/pages/components/index_page.js 这样的结构，这是一种无意义的做法，因为组件应该是一个单独的实体。一个理想的结构应该是这样的：

/
|-- /.cache
|-- /plugins
|-- /public
|-- /src
    |-- /components
    |-- /pages
    |-- /templates
    |-- html.js
|-- /static
|-- gatsby-config.js
|-- gatsby-node.js
|-- gatsby-ssr.js
|-- gatsby-browser.js

如果您在单独的组件中导入页面，则违反了页面查询规则，在这种情况下，您可能需要更改结构或使用 StaticQuery（或 useStaticQuery 挂钩)，它也有一些限制，但可能适用于您的用例。

Gatsby + Markdown：GraphQL 查询呈现为组件，但在导入页面时不呈现

Gatsby + Markdown: GraphQL query renders as a component but not when imported into a page

javascript

markdown

reactjs

graphql

gatsby