Question

我正在使用gatsby-image插件在我的Gatsby网站上显示图像。在我的GraphQL查询中，我希望能够将变量传递给relativePath参数，因为该查询正在运行（在父组件中）用于许多需要图像的组件。我似乎无法弄清楚该怎么做。

这是我的查询内容：

...

const imgData = useStaticQuery(graphql`
        query{
            file(relativePath: {eq: "talent.png"}) {
                childImageSharp {
                    fixed (width: 289, height: 589) {
                        ...GatsbyImageSharpFixed
                    }
                }
            }
        }
    `)

我想用一个变量替换“ talent.png”，这样我就可以跨组件使用此查询。这是我想要的查询：

const imgData = useStaticQuery(graphql`
        query($pageImg: String!){
            file(relativePath: {eq: $pageImg}) {
                childImageSharp {
                    fixed (width: 289, height: 589) {
                        ...GatsbyImageSharpFixed
                    }
                }
            }
        }
    `)

我尝试使用onCreatePage中的gatsby-node.js向页面添加上下文。这将适用于页面查询，但是文件节点显然无法识别页面上下文。所以我尝试将上下文添加到文件节点：

module.exports.onCreateNode = ({ node, actions }) => {
    const { createNodeField } = actions

    if(node.internal.type === 'File'){
        createNodeField({
            node,
            name: 'context',
            value: {
                pageImg: node.relativePath
            }
        })
    }
}

但仍然出现此错误： Variable "$pageImg" of required type "String!" was not provided.

在理解如何解决此问题方面的任何帮助将不胜感激。

Answer 1

我之所以将项目从Nextjs转换到Gatsby基本上是因为gatsby提供了很酷的插件，所以我遇到了同样的问题，因为我喜欢gatsby-image预渲染图像的方式。

我遇到了this issue，但是我不得不对其进行重构以使用新的useStaticQuery钩子，因此您的最终代码应如下所示：

import React from "react";
import { useStaticQuery, graphql } from "gatsby";
import Img from "gatsby-image";

const Image = ({ style, alt, src, className }) => {
  const data = useStaticQuery(graphql`
    query {
      images: allFile {
        edges {
          node {
            relativePath
            name
            childImageSharp {
              fluid(maxWidth: 600) {
                ...GatsbyImageSharpFluid
              }
            }
          }
        }
      }
    }
  `);

  const image = data.images.edges.find(img => img.node.relativePath.includes(src));
  if (!image) return null;

  return <Img fluid={image.node.childImageSharp.fluid} alt={alt} style={style} className={className} />;
};

使用Image组件：

import Image from '../components/image'
<Image
    src="gatsby-astronaut.png"
    alt="astronaut"
    className="w-full hidden md:block lg:-ml-8 rounded shadow-xl z-10"
/>

如何将变量添加到GraphQL文件查询

1 个答案: