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

问题描述

现在有下面的工作代码

GraphiQL 版本

我有这个查询来获取gatsby-image:

query getImages($fileName: String) {景观:文件(相对路径:{eq:$fileName}){childImageSharp {流体(最大宽度:1000){base64跟踪SVG纵横比源文件源集源网页srcSetWebp尺寸原始图像原名}}}}

然后是这个查询变量:

<代码>{文件名":泰坦尼克号.jpg"}

以上在 GraphiQL 中运行良好.

盖茨比版

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

从react"导入 React从盖茨比"导入 { graphql }从盖茨比图像"导入 Img导出默认值({数据})=>(<div><Img流体={data.landscape.childImageSharp.fluid}/>

)导出常量查询 = (graphql`查询 getImages($fileName: String) {景观:文件(相对路径:{eq:$fileName}){childImageSharp {流体(最大宽度:1000){base64跟踪SVG纵横比源文件源集源网页srcSetWebp尺寸原始图像原名}}}}`，{文件名:骑士.jpg"})

以上方法无效.data.landscape.childImageSharp === null

我做错了什么?

工作版本

感谢您的帮助！下面的代码工作得很好.这个 post 特别有帮助.这不是一个理想的解决方案，但它对我有用.

从'react'导入React；从 'gatsby-image' 导入 Img；从'gatsby'导入{StaticQuery，graphql}；函数渲染图像(文件){返回 (<Img流体={file.node.childImageSharp.fluid}/>)}const MyImg = 函数(道具){返回 <静态查询查询={graphql`询问 {图像:allFile(过滤器:{sourceInstanceName:{eq:图像"}}){边{节点{延期相对路径childImageSharp {流体(最大宽度:1000){... GatsbyImageSharpFluid}}}}}}`}渲染={(数据)=>{const image = data.images.edges.find(图像 =>image.node.relativePath === "knight.jpg")返回(渲染图像(图像))}}/>}导出默认的 MyImg；

解决方案

这两个答案(来自 Bens 和 Nimish)在这种情况下是错误的，它们并非针对 Gatsby.

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

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

EDIT: now with working code below

The GraphiQL version

I have this query to fetch a 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
      }
    }
  }
}

And then this query variable:

{
  "fileName": "titanic.jpg"
}

The above works fine in GraphiQL.

The Gatsby version

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

The above doesn't work. data.landscape.childImageSharp === null

What am I doing wrong?

EDIT:

The working version

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;

解决方案

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

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/

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屋！