曾经有过两个类似的问题,但是除了页面文件夹中的问题之外,没有一个问题让我真正理解了在(类)组件中使用GraphQL的问题。
我的项目结构如下所示:
-src --components ---aboutBody ----index.js --pages ---about.js
我有一个名为about(原始单一页面类型)的页面组件,并设置了一些组件来“填充”该页面(为了更好的可读性而进行了清理)。
about
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页面组件的底部。它像魅力一样按预期工作。
AboutPage
但清理这个页面了一下我想创造合适的部件,并把我的查询中的每个组件内(例如aboutBody,aboutCarousel),又清理了一下:
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组件中(完全如上所示)。
AboutBody
但这总是返回错误Cannot read property 'prismicAbout' of undefined(我什至无法控制台记录数据,它总是返回相同的错误)。
Cannot read property 'prismicAbout' of undefined
我import { graphql } from "gatsby"在两个文件中都使用过。
import { graphql } from "gatsby"
长话短说,如何在我的类组件中放入查询并仅呈现该组件,而又不弄清页面组件中的道具,如下所示:
class AboutPage extends Component { render() { return ( <LayoutDefault> <AboutBody /> </LayoutDefault> ) } }
一些博客文章提到了GraphQL查询片段,但不确定这是否是正确的用例,或者仅仅是一个愚蠢的初学者错误…
那是因为您不能在组件中使用像这样的graphql。
要在组件中使用graphql,您有两个选择:useStaticQueryfunction或StaticQuerycomponent,都来自graphql
useStaticQuery
StaticQuery
为useStaticQuery:
import React from "react" import { useStaticQuery, graphql } from "gatsby" const MyElement = () => { const data = useStaticQuery(graphql` query About { prismicAbout { data { intro_headline { text } intro_paragraph { text } } } } `) return ( <StyledIntro> <h3>About</h3> <h1>{this.props.data.prismicAbout.data.intro_headline.text}</h1> </StyledIntro> ) } export default MyElement
与 staticQuery
staticQuery
import React from 'react' import { StaticQuery, graphql } from 'gatsby'; const MyElement = () => { return( <StaticQuery query About { prismicAbout { data { intro_headline { text } intro_paragraph { text } } } } `} render={data => ( <StyledIntro> <h3>About</h3> <h1>{this.props.data.prismicAbout.data.intro_headline.text}</h1> </StyledIntro> )} /> ) } export default MyElement
希望对您有所帮助!