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

Question

有几个类似的问题，但 none 帮助我真正理解了在除 pages 文件夹中的组件之外的 (class) 组件中使用 GraphQL。

我的项目结构如下所示：

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

我有一个名为 about 的页面组件（Prismic 单页类型），并为 "fill" 此页面设置了一些组件（已清理以提高可读性）。

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 组件中（完全如上所示）。

但是它总是 returns 错误 Cannot read property 'prismicAbout' of undefined（我什至无法控制台记录数据，它总是 returns 相同的错误）。

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

长话短说，我怎样才能在我的 class 组件中放置一个查询并只渲染该组件而不澄清我的页面组件中的道具，如下所示：

class AboutPage extends Component {

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

}

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

Answer 1

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

要在组件中使用 graphql，您有两个选择：useStaticQuery 函数或 StaticQuery 组件，均来自 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

希望对您有所帮助！

Answer 2

您只能在页面组件中使用类似的查询。一种选择是只在页面中查询它，然后将数据作为道具传递给您的组件。另一种是在组件中使用静态查询。

如果您的查询中包含变量，则您不能使用静态查询。在那种情况下，您应该在页面中查询所有内容，然后将其传入，或者您可以将与该组件相关的查询部分放入该组件文件中的片段中，然后在页面查询中使用该片段。

在组件中使用片段然后将数据传递到组件中的示例：

// MyComponent.js
import React from "react"
import { graphql } from 'gatsby'

const MyComponent = (props) => {

  const { myProp: { someData } }  = props

  return (
    <div>
        my awesome component
    </div>
  )
}

export default MyComponent

export const query = graphql`
  fragment MyAwesomeFragment on Site {
     someData {
         item
     }
  }
`

// MyPage.js
import React from "react"
import { graphql } from "gatsby"

import MyComponent from "../components/MyComponent"

export default ({ data }) => {
  return (
    <div>
      {/*
        You can pass all the data from the fragment
        back to the component that defined it
      */}
      <MyComponent myProp={data.site.someData} />
    </div>
  )
}
export const query = graphql`
  query {
    site {
      ...MyAwesomeFragment
    }
  }
`

在 Gatsby docs.

中阅读有关使用片段的更多信息

Answer 3

如果您需要在基于 class 的组件中呈现查询。这对我有用：

import React, { Component } from 'react';
import { StaticQuery, graphql } from 'gatsby';

class Layout extends Component {
  render() {
    return (
      <StaticQuery
        query={graphql`
          query SiteTitleQuery {
            site {
              siteMetadata {
                title
              }
            }
          }
        `}
        render={data => {
          return (
            <main>
              {!data && <p>Loading...</p>}
              {data && data.site.siteMetadata.title}
            </main>
          )
        }}
      />
    );
  }
}

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

GraphQL query works in Gatsby page but not inside class component

reactjs

graphql

gatsby

prismic.io