带参数的 gatsby 查询答案

【问题标题】：gatsby query with parameters带参数的 gatsby 查询
【发布时间】：2021-10-13 01:42:00
【问题描述】：

我对盖茨比比较陌生。我已经将它用于一些数据或图像变化不大的静态站点。在这个特定的项目中，我正在尝试查询动态图像。这是一个测验应用程序，每次用户按下下一个问题时，我都想用输入的字符串进行查询。我对 graphQL 非常熟悉，但我读到用于图像的 OLD gasby 插件不允许您使用参数动态查询。肯定有办法做到这一点，尤其是新的盖茨比形象？我喜欢 gatsby，但是所有这些额外的插件和做相当简单的事情的方法都会产生大量的开销，哈哈……

这是我的第一次尝试。相对路径

const pageQuery = graphql`
  query {
    file(relativePath: { eq: $relativePath }) {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
  }

上面是查询，下面我有类似的东西（使用新的 getImage() 函数）

const image=getImage(data.url) <----this is where i am getting the string. it is dynamic 

              <GatsbyImage image={image}  />

图像变量基本上是一个字符串'/questions/pictureone.jpg'...问题文件夹在我的图像文件夹中，我已经将文件系统设置为指向它，所以我不考虑这个文件夹结构是问题

这里不要过多关注我的语法，因为其中一些可能会关闭。我真正想问的是，这可以用盖茨比图像来完成吗？我之前在某处读过，图像和查询必须在构建时确定，但多年来这肯定已经改变。在此先感谢您的帮助

【问题讨论】：

标签： javascript reactjs gatsby gatsby-image

【解决方案1】：

我对 graphQL 非常熟悉，但我读到的是 OLD Gasby 图像插件不允许您动态查询参数。

这根本不是真的。事实上，它与 Gatsby 图像插件、gatsby-image（来自 v2）或gatsby-plugin-image（来自 v3）无关，您的问题直接依赖于 GraphQL。由于查询是在您运行项目时静态触发的，我认为您可能需要全部查询最初来自给定文件夹，使用自定义 regex 或使用过滤器。

想法/方法与使用“标准”图像完全相同，但在这种情况下，您需要指向特定的路线/路径。应用于 Gatsby/React 环境，需要允许 Gatsby 创建图像节点。

const pageQuery = graphql`
  query {
    file(relativePath: { eq: "/your/folder/path "}) {
        childImageSharp {
          gatsbyImageData(
            width: 200
            placeholder: BLURRED
            formats: [AUTO, WEBP, AVIF]
          )
        }
      }
  }

然后，您可以遍历节点并在每次迭代中使用GatsbyImage 组件。

请记住，getImage 只是一个辅助函数，应该指向外部节点（在您的情况下为 file），所以它应该是：

const image=getImage(props.data.file)

总而言之，我们的想法是在给定文件夹的情况下获取一组图像，并使用 JavaScript 逻辑根据需要显示/隐藏它们。

我之前在某处阅读图像和查询必须是在构建时确定，但多年来这肯定发生了变化。在此先感谢您的帮助

确实，这就是 Gatsby 的工作方式，在您运行 gatsby build 命令时生成“静态”内容。

【讨论】：

【解决方案2】：

我查询了所有图像。然后这样做...“question.questionPhoto.value”是传递的文件的动态字符串或名称。这是新的 Gatsby 插件。花了我几个小时哈哈。但希望这对其他人有帮助！

{data.allFile.edges.map((item, index) => {
                  if(question.questionPhoto.value===item.node.name){
                    return <GatsbyImage image={item.node.childImageSharp.gatsbyImageData} alt="" />
                  }
                  })}

【讨论】：