GraphQL 查询适用于 Gatsby 页面，但不适用于类组件 [英] GraphQL query works in Gatsby page but not inside class component

问题描述

有几个类似的问题，但没有一个能帮助我真正理解在(类)组件中使用 GraphQL，而不是 pages 文件夹中的那些.

There have been a couple of similar questions, but none helped me really understand using a GraphQL inside a (class) component other than the ones in the pages folder.

我的项目结构如下:

-src
--components
---aboutBody
----index.js
--pages
---about.js

我有一个名为 about(棱镜单页类型)的页面组件，并设置了一些组件来填充"这个页面(为了更好的可读性进行了清理).

I have a page component called about (Prismic single page type) and set up some components to "fill" this page (cleaned up for better readability).

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

这就是我的查询的样子(在两个文件中都是这样的):

This is what my query looks like (had it like this in both files):

export const aboutQuery = graphql`
  query About {
    prismicAbout {
      data {

        # Intro Block
        intro_headline {
          text
        }
        intro_paragraph {
          text
        }
      }
    }
  }
`

(如果我在底部遗漏了一个括号，这是由于清理了 SO 的查询示例——如前所述，它在我的页面组件中工作).

(In case I am missing a bracket at the bottom, it's due to cleaning up the query example for SO — as mentioned earlier, it's working in my page component).

我的 graphql 查询位于 AboutPage 页面组件的底部.它就像一个魅力和预期的那样.

My graphql query is at the bottom of the AboutPage page component. It works like a charm and as intended.

但是为了稍微清理一下这个页面，我想创建适当的组件并将我的查询放在每个组件中(例如 aboutBody、aboutCarousel)，再次清理一下:

But to clean this page up a bit I wanted to create appropriate components and put my query inside each component (e.g. aboutBody, aboutCarousel), again cleaned up a bit:

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 组件中(正是如上所示的方式).

And I deleted the query from my about page component and put it inside my AboutBody component (exactly the way as shown above).

但是它总是返回错误 Cannot read property 'prismicAbout' of undefined(我什至无法控制台记录数据，它总是返回相同的错误).

But with this it always returns the error Cannot read property 'prismicAbout' of undefined (I can't even console log the data, it always returns the same error).

我在两个文件中都使用了 import { graphql } from "gatsby".

I used import { graphql } from "gatsby" in both files.

长话短说，我怎样才能实现在我的类组件中放置一个查询并只渲染组件而不像这样澄清我的页面组件中的道具:

Long story short, how can I achieve putting a query inside my class component and render only the component without clarifying the props in my page component like this:

class AboutPage extends Component {

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

}

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

Some blogs posts mention GraphQL Query Fragments, but not sure if this is the correct use case or if it's simply a stupid beginner mistake...

推荐答案

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

That's because you can't use graphql like this in your component.

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

To use graphql in a component, you've got two options : useStaticQuery function or StaticQuery component, both from graphql

对于 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

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

希望对你有帮助！

这篇关于GraphQL 查询适用于 Gatsby 页面，但不适用于类组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！