graphQL 查询中的变量答案

【问题标题】：Variables in graphQL queriesgraphQL 查询中的变量
【发布时间】：2019-05-17 04:05:25
【问题描述】：

编辑：现在下面有工作代码

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 中使用它，所以我有以下代码：

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

我做错了什么？

编辑：

工作版本

感谢您的帮助！以下代码运行良好。这个post 特别有用。这不是一个理想的解决方案，但它对我有用。

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;

【问题讨论】：

非常感谢您提供工作版本！你为我节省了几个小时的工作时间。
无论如何传递 maxWidth: 1000 或片段 (GatsbyImageSharpFluid) 作为变量。这会让它更有活力。

标签： javascript reactjs graphql gatsby

【解决方案1】：

所以要传递变量，你必须使用以下语法

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"}
   )

【讨论】：

注意：这只适用于gatsby-node文件，通过静态查询（例如）将变量传递给graphql方法将不允许变量。

【解决方案2】：

这两个答案（来自 Bens 和 Nimish）在这种情况下是错误的，它们并不是 Gatsby 特有的。

如果您想在 GraphQL 查询中使用变量，您必须通过 gatsby-node.js 中的 createPage 函数中的上下文传递它们，如下所述： https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/

您目前不能使用除此之外的变量，例如看看这个讨论： https://spectrum.chat/?t=abee4d1d-6bc4-4202-afb2-38326d91bd05

【讨论】：

可悲的是，情况就是这样。我已经根据第二个链接添加了一些工作代码。