Javascript 盖茨比&x2B；标记：GraphQL查询作为组件呈现，但在导入到页面时不呈现

我有一个简单的组件，可以读取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
        }
      }
    }
  }
`

从“React”导入React
从“盖茨比”导入{graphql}
常量IndexPage=（{data}）=>{
console.log（数据）
const createMarkup={{uuu html:data.allmarkdownMarkark.edges[0].node.html}
返回(
测试启动


测试端
)
}
导出默认索引扩展
export const pageQuery=graphql`
查询我的查询{
所有的标记{
边缘{
节点{
html
}
}
}
}
`

在访问“localhost:8000/components/index\u页面”时效果非常好

然后我尝试将其导入页面，非常简单，如下所示：

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

从“React”导入React
从“/components/Header”导入标题
从“/components/Nav”导入导航
从“/components/Footer”导入页脚
从“react bootstrap”导入{Container，Row，Col}
从“/components/index_page”导入IndexPage在您的
IndexPage
组件中，您使用的是，它仅在页面（因此得名）组件中工作

在
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

如果您在单独的组件中导入页面，则违反了页面查询规则，在这种情况下，您可能需要更改结构或使用（或
useStaticQuery
hook），这也有一些限制，但可能适用于您的用例。
页面查询仅适用于。。。pageI不明白静态查询和页面查询之间的区别，但现在一切都有了意义！谢谢