На Gatsby, как сделать запрос GraphQL, используя опору?

Question

Я передаю реквизит новому компоненту и пытаюсь использовать его для выполнения запроса graphql. Выглядит это так.

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

const ComponentName = props => {
  const getImage = graphql`
{
  image: file(relativePath: { eq: ${props.img} }) {
    childImageSharp {
      fluid {
        ...GatsbyImageSharpFluid
      }
    }
  }
}
`
  const data = useStaticQuery(getImage)
  return (
    <li>
      <Img
        fluid={data.image.childImageSharp.fluid}
      />
    </li>
  )
}

export default ComponentName

Но я получаю эту ошибку BabelPluginRemoveGraphQLQueries: String interpolations are not allowed in graphql fragments. Included fragments should be referenced as...MyModule_foo.

Я перепробовал всевозможные трюки, чтобы избавиться от ошибки «интерполяции строк». Но ни один из них не работает (он просто каждый раз показывает другую ошибку).

Я предполагаю, что вы не можете выполнить запрос graphql, используя реквизиты? Или есть другой способ сделать это?

Answer 1

С StaticQuery документы :

StaticQuery не принимает переменные (отсюда и название «статические»), но может использоваться в любом компоненте, включая страницы .

И то же самое для версии hook useStaticQuery:

useStaticQuery не принимает переменные (отсюда и название «статические») , но может использоваться в любом компоненте, включая страницы.

Подробнее о GitHub Gatsby можно прочитать здесь .