graphQL查询中的变量
graphQL查询中的变量
提问于 2018-12-17 00:33:03
编辑:现在使用下面的工作代码
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;页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/53804219
复制相关文章
相似问题