Gatsby中React类组件使用useStaticQuery静态查询的报错与疑问

这个报错已经明确说明：useStaticQuery 无法直接在React类组件中使用，它是Gatsby基于React规范封装的自定义Hook，完全遵循React Hooks的调用约束，不存在可以硬塞到类组件里正常运行的写法。

报错背后的规则逻辑 #

你遇到的报错有两层触发原因：

• 首先是你当前把useStaticQuery写在组件定义外层的全局顶层作用域，本身就违反了Hooks的基础调用规则：Hooks必须依赖React组件的挂载生命周期上下文才能正常工作，独立写在全局作用域里的Hook没有对应的组件挂载锚点，从定义上就不合法。
• 其次，这个规则不是Gatsby自定义的，是React框架对所有Hook的统一约束——无论是React内置的useState/useEffect，还是Gatsby封装的useStaticQuery，都必须在函数组件或者自定义Hook内部调用，类组件天生不具备Hook的调用上下文，就算关闭ESLint校验强行写在类组件里，运行时也会直接报错。

两种可落地的实现方案 #

• 方案一：包装一个函数组件作为查询层，无需重构原有类组件逻辑
  你可以保留现有的类组件核心业务逻辑，在外层写一个简单的函数组件来调用useStaticQuery，再把查询拿到的数据通过props透传给类组件即可，示例代码：

  import * as React from "react"
  import '../styles/layout.scss'
  import Layout from '../components/layout'
  import { useStaticQuery, graphql } from 'gatsby'
  import { container } from '../styles/mystyles.module.scss'
  
  // 类组件保持原有逻辑，从props读取查询结果
  class IndexPage extends React.Component {
    render() {
      const siteTitle = this.props.siteData?.site?.siteMetadata?.title
      return (
        <Layout>
          <div>
            <h1 className={container}>hello, {siteTitle}</h1>
            <div>This is my container</div>
          </div>
        </Layout>
      )
    }
  }
  
  // 在外层函数组件中调用Hook，作为数据透传的包装层
  const WrappedIndexPage = (props) => {
    const data = useStaticQuery(graphql`
      query HeaderQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `)
    return <IndexPage {...props} siteData={data} />
  }
  
  export default WrappedIndexPage
  

• 方案二：直接把类组件改造为函数组件
  这也是Gatsby官方推荐的标准用法，改造后可以直接在函数组件内部调用useStaticQuery，不需要额外的包装层，写法更简洁：

  import * as React from "react"
  import '../styles/layout.scss'
  import Layout from '../components/layout'
  import { useStaticQuery, graphql } from 'gatsby'
  import { container } from '../styles/mystyles.module.scss'
  
  const IndexPage = () => {
    const data = useStaticQuery(graphql`
      query HeaderQuery {
        site {
          siteMetadata {
            title
          }
        }
      }
    `)
    return (
      <Layout>
        <div>
          <h1 className={container}>hello, {data.site.siteMetadata.title}</h1>
          <div>This is my container</div>
        </div>
      </Layout>
    )
  }
  
  export default IndexPage
  

注意：不要尝试把useStaticQuery硬塞到类组件的构造函数、render方法、生命周期函数中调用，这种写法不仅会触发ESLint规则报错，在React运行时也会因为缺失Hook的调用上下文直接抛出运行时错误，无法正常工作。

内容的提问来源于stack exchange，提问作者TommyD