Переменные в запросах graphQL

Question

РЕДАКТИРОВАТЬ: теперь с рабочим кодом ниже

Версия GraphiQL

У меня есть этот запрос для получения gatsby-image :

query getImages($fileName: String) {
  landscape: file(relativePath: {eq: $fileName}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
      }
    }
  }
}

И затем эта переменная запроса:

{
  "fileName": "titanic.jpg"
}

Вышеописанное прекрасно работает в GraphiQL .

Версия Gatsby

Теперь я хочу использовать его в Gatsby, поэтому у меня есть следующий код:

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

export default ({ data }) => (
  <div>
    <Img fluid={data.landscape.childImageSharp.fluid} />
  </div>
)

export const query = (
  graphql`
    query getImages($fileName: String) {
      landscape: file(relativePath: {eq: $fileName}) {
        childImageSharp {
          fluid(maxWidth: 1000) {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    }
  `,
  {fileName: "knight.jpg"}
)

Выше не работает.data.landscape.childImageSharp === null

Что я делаю не так?

РЕДАКТИРОВАТЬ:

Рабочая версия

Спасибо за помощь!Следующий код работает довольно хорошо.Эта запись была особенно полезна.Это не идеальное решение, но оно работает для меня.

import React from 'react';
import Img from 'gatsby-image';
import { StaticQuery, graphql } from 'gatsby';

function renderImage(file) {
  return (
    <Img fluid={file.node.childImageSharp.fluid} />
  )
}

const MyImg = function (props) {

  return <StaticQuery
    query={graphql`
      query {
        images: allFile(filter: { sourceInstanceName: { eq: "images" } }) {
          edges {
            node {
              extension
              relativePath
              childImageSharp {
              fluid(maxWidth: 1000) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
    `}
    render={(data) => {
      const image = data.images.edges.find(
        image => image.node.relativePath === "knight.jpg"
      )
      return(renderImage(image))
    }}
  />
}

export default MyImg;

Answer 1

Два ответа (от Bens и Nimish) неверны в этом контексте, они не являются специфичными для Gatsby.

Если вы хотите использовать переменные в запросах GraphQL, вы должны передать их через контекств функции createPage в gatsby-node.js, как описано здесь: https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/

В настоящее время вы не можете использовать переменные вне этого, например, посмотрите на это обсуждение: https://spectrum.chat/?t=abee4d1d-6bc4-4202-afb2-38326d91bd05

Answer 2

Таким образом, чтобы передать переменные, вы должны использовать следующий синтаксис

graphql(`<your_query_with_variable>`, { indexPage: <value_of_variable> })

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

export const query = grapqhl(
 `query getImages($fileName: String) {
  landscape: file(relativePath: {eq: $fileName}) {
    childImageSharp {
      fluid(maxWidth: 1000) {
        base64
        tracedSVG
        aspectRatio
        src
        srcSet
        srcWebp
        srcSetWebp
        sizes
        originalImg
        originalName
       }
     }
   }
 }
`,
{fileName: "knight.jpg"}

)