graphQL查询中的变量 [英] Variables in graphQL queries

问题描述

现在下面带有工作代码

我有此查询来获取 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 中正常运行.

The above works fine in GraphiQL.

现在我想在盖茨比中使用它，所以我有以下代码:

Now I want to use it in Gatsby, so I have the following code:

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

我在做什么错了?

感谢您的帮助！以下代码效果很好.此

Thanks for the help! The following code works pretty well. This post was particularly helpful. This is not an ideal solution, but it works for me.

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;

推荐答案

在这种情况下，这两个答案(来自Bens和Nimish)是错误的，它们并不是特定于盖茨比的.

The two answers (from Bens and Nimish) are wrong in this context, they're not specific to Gatsby.

如果要在GraphQL查询中使用变量，则必须在gatsby-node.js中的createPage函数中通过上下文传递变量，如下所示: https://www.gatsbyjs.org/docs/programmatically-create-来自数据的页面/

If you want to use variables in the GraphQL queries, you have to pass them via context in the createPage function in gatsby-node.js as explained here: https://www.gatsbyjs.org/docs/programmatically-create-pages-from-data/

您目前不能使用超出该范围的变量，例如看一下这个讨论: https://spectrum.chat/?t=abee4d1d-6bc4-4202-afb2 -38326d91bd05

You currently can't use variables outside of that, e.g. have a look at this discussion: https://spectrum.chat/?t=abee4d1d-6bc4-4202-afb2-38326d91bd05

这篇关于graphQL查询中的变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！