小编典典

GraphQL查询可在Gatsby页面中使用,但不能在类组件中使用

reactjs

曾经有过两个类似的问题,但是除了页面文件夹中的问题之外,没有一个问题让我真正理解了在(类)组件中使用GraphQL的问题。

我的项目结构如下所示:

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

我有一个名为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页面组件的底部。它像魅力一样按预期工作。

但清理这个页面了一下我想创造合适的部件,并把我的查询中的每个组件内(例如aboutBodyaboutCarousel),又清理了一下:

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查询片段,但不确定这是否是正确的用例,或者仅仅是一个愚蠢的初学者错误…


阅读 306

收藏
2020-07-22

共1个答案

小编典典

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

要在组件中使用graphql,您有两个选择:useStaticQueryfunction或StaticQuerycomponent,都来自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

希望对您有所帮助!

2020-07-22