Question

我有一个Billboard组件，它像这样导入到我的主页上：

<Billboard id="successful_network_ebook_billboard"/>

该组件的内容为：

import React, {Component} from "react";
import T from 'i18n-react'
import Link from "../components/LocalizedLink";
import Tank from "../components/Tank";
import CTA from "../components/CTA";
import Img from "gatsby-image"
import {graphql} from "gatsby"

import "../styles/css/components/Billboard.css";

class Billboard extends Component {
    successful_network_ebook_billboard = () => {
        return (
            <section id={this.props.id} className="Billboard">
                <Img className="bg" fluid={this.props.data.bgNetwork.childImageSharp.fluid} alt={this.props.alt}/>
                <Tank className="content">
                    <div className="text">
                        <h3>Title</h3>
                        <p>Paragraph</p>
                        <CTA to="/page">Click here</CTA>
                    </div>
                </Tank>
            </section>
        )
    }

    render() {
        switch (this.props.id) {
            /* There are more cases */
            case "successful_network_ebook_billboard":
                return (this.successful_network_ebook_billboard());
            default:
                return (
                    <div></div>
                )
        }
    }
}

export default Billboard

require("../queries/fragment.headers");

export const queryBillboardImages = graphql `
    query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
`

当我运行代码时，除了我尝试通过GraphQL加载的图像之外，其他所有东西都可以正常加载。我收到消息：

(Billboard, ) TypeError: Cannot read property 'bgNetwork' of undefined

“数据”显然是空的，但我认为我使用的是到处都有的语法。

我尝试获取 this.data 而不是 this.props.data ；我收到同样的错误。

我尝试将组件转换为 const ，这似乎提供了一种更“直接”的语法，但是我遇到了另一个更深奥的错误。

我想知道如何将GrphQL调用的结果传递到我的组件中。当我在页面上执行此操作时，就像将this.props.data分解为一个常量然后就可以使用一样简单。但是当在组件内部时，它似乎无法正常工作。

如果我这样做

console.log(data)

返回的所有东西都是来自父母的 id 和 alt 道具。

谢谢您的帮助！

Answer 1

graphql query仅可用于Pages，而不能用于所有组件。对于组件，您需要使用StaticQuery组件或将useStaticQuery与最新版本的react一起使用

export default (props) => (
  <StaticQuery
    query={graphql `
      query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
  `}
    render={data => (
      <Billboard  {...props} data={data}/>
    )}
  />
);

或使用useStaticQuery

export default (props) => {
  const data = useStaticQuery(graphql `
      query BillboardImages {
        bgNetwork: file(relativePath: { eq: "assets/images/healthcare/banner_soc2_bg.jpg" }) {
            ...fluidHeader
        }
    }
  `)

  return (
    <Billboard  {...props} data={data}/>
  )
}

在React组件中时如何从GraphQL传递数据

1 个答案: