有几个类似的问题,但除了 pages 文件夹中的组件之外,没有一个问题能帮助我真正理解在(类)组件中使用 GraphQL。
我的项目结构如下所示:
-src
--components
---aboutBody
----index.js
--pages
---about.js
我有一个名为about
(Prismic 单页类型)的页面组件,并设置了一些组件来“填充”此页面(已清理以提高可读性)。
class AboutPage extends Component {
render() {
return (
<LayoutDefault>
<AboutBody
introHeadline={this.props.data.prismicAbout.data.intro_headline.text}
introParagraph={this.props.data.prismicAbout.data.intro_paragraph.text}
/>
</LayoutDefault>
)
}
}
export default AboutPage
这就是我的查询的样子(在两个文件中都这样):
export const aboutQuery = graphql`
query About {
prismicAbout {
data {
# Intro Block
intro_headline {
text
}
intro_paragraph {
text
}
}
}
}
`
(如果我在底部缺少一个括号,这是由于清理了 SO 的查询示例——如前所述,它在我的页面组件中工作)。
我的 graphql 查询位于AboutPage
页面组件的底部。它就像一个魅力和预期的那样工作。
但是为了稍微清理一下这个页面,我想创建适当的组件并将我的查询放在每个组件中(例如aboutBody
,aboutCarousel
),再次清理一下:
class AboutBody extends Component {
render() {
return (
<StyledIntro>
<h3>About</h3>
<h1>{this.props.data.prismicAbout.data.intro_headline.text}</h1>
</StyledIntro>
)
}
}
export default AboutBody
我从我的about
页面组件中删除了查询并将其放入我的AboutBody
组件中(完全如上所示的方式)。
但是这样它总是返回错误Cannot read property 'prismicAbout' of undefined
(我什至不能控制台记录数据,它总是返回相同的错误)。
我import { graphql } from "gatsby"
在两个文件中都使用了。
长话短说,我怎样才能实现在我的类组件中放置一个查询并只呈现该组件而不澄清我的页面组件中的道具,如下所示:
class AboutPage extends Component {
render() {
return (
<LayoutDefault>
<AboutBody />
</LayoutDefault>
)
}
}
一些博客文章提到了 GraphQL 查询片段,但不确定这是否是正确的用例,或者这只是一个愚蠢的初学者错误......