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

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 只能用于页面而不是所有组件。对于组件，您需要使用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}/>
  )
}