GraphQL 查询在 Gatsby 页面中有效，但在类组件中无效

有几个类似的问题，但除了页面文件夹中的组件之外，没有一个问题可以帮助我真正理解在（类）组件中使用 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（我什至无法控制台记录数据，它总是返回相同的错误）。

I used import { graphql } from "gatsby"在两个文件中。

长话短说，我怎样才能实现将查询放入我的类组件中并仅渲染组件而不澄清页面组件中的道具，如下所示：

class AboutPage extends Component {

  render() {
    return (
        <LayoutDefault>
          <AboutBody />
        </LayoutDefault>
    )
  }

}

一些博客文章提到 GraphQL 查询片段，但不确定这是否是正确的用例，或者这是否只是一个愚蠢的初学者错误......

那是因为你不能在组件中像这样使用 graphql 。

要在组件中使用 graphql，您有两个选择：useStaticQuery函数或StaticQuery组件，均来自 graphql

for 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

with 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

希望对您有帮助！