编辑:现在使用下面的工作代码
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;
发布于 2018-12-17 01:36:24
在这种情况下,两个答案(来自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
发布于 2018-12-17 00:43:52
因此,要传递变量,必须使用以下语法
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"}
)
https://stackoverflow.com/questions/53804219
复制相似问题