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

Posted 2023-03-08

【中文标题】如何将变量添加到 GraphQL 文件查询

【英文标题】：How do I add variables to a GraphQL File query

【发布时间】：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 的大小并导致加载时间变慢——最好在您的页面查询中具体说明

【参考方案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"
    
    className="w-full hidden md:block lg:-ml-8 rounded shadow-xl z-10"
/>