Строковая интерполяция в запросе graphQL

Question

Я новичок в Gatsby и его системе запросов graphQL для извлечения ресурсов.У меня есть рабочий компонент Image, который выбирает изображение и отображает его.Я хочу, чтобы имя изображения было настраиваемым, но я не могу понять, как его отрисовать.

Вот рабочий компонент:

const Image = () => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image gatsby-astronaut.png
        placeholderImage: file(relativePath: { eq: "gatsby-astronaut.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

А вот что я пытался получить настраиваемое изображение:

const Image = ({ imgName }: { imgName: string }) => (
  <StaticQuery
    query={graphql`
      query {
        // fetching the image imgName
        placeholderImage: file(relativePath: { eq: "${imgName}.png" }) {
          childImageSharp {
            fluid(maxWidth: 300) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    `}
    render={data => <Img fluid={data.placeholderImage.childImageSharp.fluid} />}
  />
);

Но возникает следующая ошибка длязапрос:

Expected 1 arguments, but got 2.ts(2554)

Как получить настраиваемое имя изображения?

Answer 1

Проверьте документы для статического запроса

StaticQuery может выполнять большинство операций, выполняемых запросом страницы, включая фрагменты.Основные отличия:

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

Так что вы можете запросить изображение GatsbyImageSharpFluid в запросе вашей страницы и передать его в качестве флюида непосредственно в изображение Гэтсби.