gatsby 和 graphql ：过滤特定的单个图像答案

【问题标题】：gatsby & graphql : filtering for a specific single imagegatsby 和 graphql ：过滤特定的单个图像
【发布时间】：2020-09-03 19:02:21
【问题描述】：

我不太了解 graphql 或 gatsby，但我相信我的所有图像都通过将其放在我的 gatsby-config.js 中加载到 graphql

    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: path.join(__dirname, `src/assets/images`),
      },
    },

然后我尝试查询我可以使用的特定图像

    query MyQuery {
      allImageSharp(filter: {id: {eq: "7acfccd5-4aef-532b-8889-9d844ae2068b"}}) {
        edges {
          node {
            sizes {
              sizes
              srcSet
              src
              aspectRatio
            }
            id
          }
        }
      }
    }

这会返回我想要的，但我必须为此查询输入的 id 是7acfccd5-4aef-532b-8889-9d844ae2068b。如果我把它放在我的代码中，这个 id 甚至会保持不变吗？有没有办法将 id 设置为更有意义的东西？

如果我将查询保存到变量data，结果表明在Netlify 上data.allImageSharp.edges[0] 为空，而在本地此值将返回我需要的值

我正在寻找查询单个图像的最佳方式。 不是多个图像。如果我可以设置自己的 id，那么我可以查询这些。

更新

我在gatsby-source-filesystem documentation 中找到了一个示例，但不知道如何将其添加到我的代码中

【问题讨论】：

标签： reactjs graphql gatsby netlify gatsby-image

【解决方案1】：

有了这个sn-p：

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`,
    path: path.join(__dirname, `src/assets/images`),
  },
},

基本上，您告诉您的 GraphQL 架构将在 src/assets/images 文件夹中找到 images，因此您将能够通过 GraphQL 查询此文件夹中的所有内容。您正在指定数据的来源。

来自gatsby-source-filesystem documentation：

插件从文件创建文件节点。各种“变压器” 插件可以将文件节点转换为各种其他类型的数据，例如 gatsby-transformer-json 将 JSON 文件转换为 JSON 数据节点和 gatsby-transformer-remark 将 markdown 文件转换为 MarkdownRemark 节点，您可以从中查询 HTML 表示降价。

回答您的问题，当然，您可以对图像具有的任何属性或节点进行过滤和排序，例如名称、路径、扩展名等。您可以在/___graphql 下找到一个有用的自动完成工具来处理您的查询运行gatsby develop 命令时的路径。这将帮助您检查可以查询和过滤哪些参数。

【讨论】：

我一直在使用/__graphql 我认为答案在 gatsby-source-filesystem-documentation 中的某处。我目前在我的 gatsby-node.js 中为降价页面创建节点，但我只是复制并粘贴了代码。看起来他们有一个jpg的例子，但我不太明白。我要把它添加到我的问题中
嘿，所以我不太清楚你的意思。我的问题中的 graphql 查询在本地工作，但data.allImagesSharp 在推送到 Netlify 时返回一个空数组。你有一个例子吗？我从 graphql 得到了那个疯狂的数字 7acfccd5-4aef-532b-8889-9d844ae2068b，所以我不知道如何更改它
你好@Sam。使用gatsby-image 有点棘手。通常在___graphql 模式下接收开发中的空数组是“常见的”，但查询仍然可以工作。能否提供完整的gatsby-config.js 文件？
K，在上面
此问题中提供的gatsby-node.js 缺少其他问题中的一些配置，并回答@Sam：例如const { fmImagesToRelative } = require('gatsby-remark-relative-images'); exports.onCreateNode = ({ node }) => { fmImagesToRelative(node); };

【解决方案2】：

如果您有一个路径为src/images/exampleImage.jpg 的图像，您可以通过使用file 而不是allImageSharp 来查询图像名称。

query HeaderQuery {
  exampleImage: file(
    extension: {eq: "jpg"},
    name: {eq: "exampleImage"}
  ) {
    childImageSharp {
      fluid {
        src
        srcSet
        sizes
        srcSetWebp
      }
    }
  }
}

您还可以将{extension: {eq: "jpg"} 替换为{extension: {regex: "/(jpg)|(jpeg)|(png)/"} 以查询任何扩展类型的文件。

【讨论】：