GraphQL查询可在Gatsby页面中使用，但不能在类组件中使用 [英] GraphQL query works in Gatsby page but not inside class component

问题描述

有两个类似的问题，但是没有一个问题让我真正理解在页面文件夹中使用的GraphQL在(类)组件内部.

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屋！