Question

我已经在名为 '标头' 一个react {部件{1}}目录在/src/components定义如下：

gatsby

我尝试将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类组件中的查询数据？

Answer 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。

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

1 个答案: