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

【问题标题】：How do I add variables to a GraphQL File query如何将变量添加到 GraphQL 文件查询
【发布时间】：2019-12-17 12:50:03
【问题描述】：

我正在使用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
                    }
                }
            }
        }
    `)

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

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.

我们将不胜感激任何有助于理解如何解决此问题的帮助。

【问题讨论】：

我马上就知道，gatsbyjs.org/docs/use-static-query/#known-limitations 的 useStaticQuery 不支持该变量。我不太清楚您希望从哪里获取文件路径数据以在 $pageImg 变量中的查询中使用，但我想知道您是否不能使用 allFileSharp 查询（可能带有过滤器）来获取多个图片，然后将它们传递给子组件。
是的，我实际上最终使用了allFile 并查询名称，然后使用它来过滤我的代码
如果您有很多图片，在组件中查询allFile 可能会显着增加page-data.json 的大小并导致加载时间变慢——最好在您的页面查询中具体说明

标签： graphql gatsby

【解决方案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"
/>

【讨论】：