react, gatsby - 如何在 React 类组件中访问 GraphQL 查询数据答案

【问题标题】：react, gatsby - how to access GraphQL query data in react class componentreact, gatsby - 如何在 React 类组件中访问 GraphQL 查询数据
【发布时间】：2019-06-22 18:48:22
【问题描述】：

我在gatsby 的/src/components 目录中有一个名为“Header”的react 组件，定义如下：

import React, { Component } from "react"
import { Link } from 'gatsby'
import { StaticQuery, graphql } from 'gatsby'
import Img from "gatsby-image"
import "./header.css"

class Header extends Component {

        constructor(props) {
            super(props);
        }

        render() {
            return(
                <Img fixed={data.file.childImageSharp.fixed} />
            )
        }
    }

    export default Header

    export const query = graphql`
      query {
        file(relativePath: { eq: "logo.png" }) {
          childImageSharp {
            # Specify the image processing specifications right in the query.
            # Makes it trivial to update as your page's design changes.
            fixed(width: 125, height: 125) {
              base64
            }
          }
        }
      }
    `

我尝试将StaticQuery 与功能组件一起使用，但它不起作用。所以，我想坚持类组件语法。

在这里，查询在http://localhost:8001/___graphql中执行良好

如何访问react类组件中的查询数据？

【问题讨论】：

@BenBachem 是的，得到了TypeError: Cannot read property 'file' of undefined 错误
将console.log(this) 放入您的渲染函数中。我想您会发现 data 道具中嵌套了此信息。我想可能是this.props.data.file。
嘿@Valay，你必须使用带有组件的StaticQuery。 gatsby 在非页面组件中将忽略全局查询（就像您在此示例中使用的那样）。您对 StaticQuery 有什么问题？
另外，如果它在页面组件中，您需要从道具中获取它，所以this.props.data.file... 就像@staypuftman 指出的那样
@Derek Nguyen 是的，你是对的。我使用了StaticQuery 和 {...props}，它现在工作正常。但是遇到了另一个问题 - 因为我有功能组件，我如何添加窗口滚动事件侦听器。以前我使用的是类组件，并且窗口滚动在 componentDidMount 中工作正常。

标签： reactjs ecmascript-6 graphql gatsby

【解决方案1】：

只有页面组件文件可以导出 query 变量以进行查询，如您的示例所示。请参阅 Gatsby 文档中的 Use a page query。

这是StaticQuery 与类组件一起使用的示例。你必须用函数式组件包装类组件才能使其工作。

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

class CoolThing extends React.Component {
  render () {
    console.log(this.props)
    return (
      <div>
        {this.props.site.siteMetadata.title}

        {/* conditionally render directories */}
        {this.props.directories.edges && (
          <ul>
            {this.props.directories.edges.map((directory) => {
              return <li key={directory.node.id}>{ directory.node.name }</li>
            })}
          </ul>
        )}
      </div>
    )
  }
}

export default () => (
  <StaticQuery
    query={graphql`
      query {
        site {
          siteMetadata {
            title
          }
        }
        allDirectory {
          edges {
            node {
              id
              name
            }
          }
        }
      }
    `}
    render={(data) => (
      <CoolThing site={data.site} directories={data.allDirectory} />
    )}
  />
)

Here is a related discussion 讨论主题。

您也可以考虑使用Gatsby's useStaticQuery hook。

【讨论】：