在Gatsby中如何通过组件Props执行GraphQL查询？

这个问题本质是Gatsby的静态查询机制限制：useStaticQuery（以及旧版的StaticQuery组件）是构建阶段执行的静态查询，它的GraphQL查询语句必须在构建时就完全确定，不能依赖组件运行时的props——因为props的值只有组件渲染时才会传入，构建阶段根本无法获取。你用${props.img}做字符串插值的方式，违反了静态查询的要求，所以才会抛出“字符串插值不允许”的错误。

简单来说：静态查询不支持动态参数，你没法直接通过props给useStaticQuery的查询传值。

下面两种方法可以实现你想要的“根据props加载对应图片”的需求：

方案一：查询所有目标图片，运行时动态筛选 #

如果你的组件是通用组件（非页面组件），最直接的方法是先在静态查询里把所有可能用到的图片都查出来，然后在组件里通过props.img的路径去匹配对应的图片数据。

修改后的代码示例：

import React from "react"
import { graphql, useStaticQuery } from "gatsby"
import Img from "gatsby-image"

const ComponentName = props => {
  // 构建时查询所有符合条件的图片（这里假设图片都在images目录下）
  const data = useStaticQuery(graphql`
    query {
      allFile(filter: { relativePath: { regex: "/^images/" } }) {
        nodes {
          relativePath
          childImageSharp {
            fluid {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  `)

  // 运行时根据props传入的路径找到对应的图片
  const targetImage = data.allFile.nodes.find(
    node => node.relativePath === props.img
  )

  // 处理图片不存在的情况，避免报错
  if (!targetImage) {
    return <li>找不到指定图片：{props.img}</li>
  }

  return (
    <li>
      <Img fluid={targetImage.childImageSharp.fluid} />
    </li>
  )
}

export default ComponentName

注意要点： #

• 调整filter条件：根据你实际的图片存储路径修改regex或其他筛选规则，尽量缩小查询范围，避免查询不必要的文件（比如可以指定extension: { in: ["jpg", "png"] }只查图片格式）。
• 性能考量：如果你的图片数量非常多，这种查询会增加构建时间，所以只查询组件实际需要用到的图片集合。

方案二：用页面查询（Page Query）传递变量 #

如果你的组件是页面组件，或者可以把查询逻辑提到页面级别，那么可以使用Gatsby的页面查询（Page Query）——它支持传入动态变量，然后把查询到的图片数据通过props传给子组件。

示例步骤：

1. 在页面组件中定义带变量的查询：

import React from "react"
import { graphql } from "gatsby"
import ComponentName from "../components/ComponentName"

// 页面查询支持变量，这里接收imgPath参数
export const pageQuery = graphql`
  query($imgPath: String!) {
    image: file(relativePath: { eq: $imgPath }) {
      childImageSharp {
        fluid {
          ...GatsbyImageSharpFluid
        }
      }
    }
  }
`

const MyPage = ({ data }) => {
  // 把查询到的图片数据传给子组件
  return <ComponentName imageData={data.image.childImageSharp.fluid} />
}

export default MyPage

2. 子组件直接使用传入的图片数据：

import React from "react"
import Img from "gatsby-image"

const ComponentName = ({ imageData }) => {
  return (
    <li>
      <Img fluid={imageData} />
    </li>
  )
}

export default ComponentName

注意要点： #

• 页面查询只能在Gatsby的页面组件中使用（即放在src/pages目录下的组件，或者通过createPages API生成的页面），普通组件无法直接使用页面查询。

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