如何在不迭代的情况下访问数组中的特定元素？答案

【问题标题】：How to access a specific element out of an array without iterating?如何在不迭代的情况下访问数组中的特定元素？
【发布时间】：2020-03-27 04:28:29
【问题描述】：

我有以下文件夹结构

/images
/images/pic1.jpg
/images/pic2.jpg

使用以下 GraphQL 查询时..

query MyQuery1 {
  file(sourceInstanceName: {eq: "images"}, name: {eq: "pic1"}) {
    name
    publicURL
  }
}

可以使用<img src={data.file.publicUrl} alt="" /> 之类的方式访问结果。到目前为止，一切都很好。

但现在我想通过一个查询从该文件夹中检索多个图像。所以我想出了以下内容：

query {
  allFile(
    filter: {
      sourceInstanceName: { eq: "images" }
      name: { in: ["pic1", "pic2"] }
    }
  ) {
    nodes {
      name
      publicURL
    }
  }
}

太棒了！但是，我现在如何无需使用map 或遍历结果就可以访问其中一张图片？

我正在寻找这样的东西，这当然行不通：

<img src={data.file.publicUrl name.eq="pic1"} alt="pic1"/>

也不是这样的：

<img src={data.allFile.nodes.0.publicUrl} alt="pic1" />

我想使用gatsby-image 来优化和调整我的图像大小。这就是我选择 GraphQL 方式而不是直接导入的原因。我在错误的轨道上吗？

【问题讨论】：

标签： graphql gatsby graphql-js gatsby-image

【解决方案1】：

我自己想出来的。我不知道可以将事物链接在一起。这对我有用。

query {
  imageOne: file(sourceInstanceName: {eq: "images"}, relativePath: {eq: "pic1.jpg"}) {
    id
    childImageSharp {
      fixed(width: 30) {
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      }
    }
  }
  imageTwo: file(sourceInstanceName: {eq: "images"}, relativePath: {eq: "pic2.jpg"}) {
    id
    childImageSharp {
      fixed(width: 30) {
        base64
        tracedSVG
        aspectRatio
        width
        height
        src
        srcSet
        srcWebp
        srcSetWebp
        originalName
      }
    }
  }
}

然后像这样访问它：

<Img fixed={data.imageOne.childImageSharp.fixed} alt="" />

和

<Img fixed={data.imageTwo.childImageSharp.fixed} alt="" />

P.S：这是gatsby-config.js中的相关部分

{
  resolve: `gatsby-source-filesystem`,
  options: {
    name: `images`, <<== gets filtered by sourceInstanceName: ..
    path: `${__dirname}/src/images/`,
  },
},
`gatsby-transformer-sharp`,
`gatsby-plugin-sharp`,

【讨论】：

【解决方案2】：

OP 回答了他们自己的问题，但这里有另一种方式：使用 Array.prototype.filter

const Index = (props) => {
  const { data: { allFile: { edges } } } = props;

  const heroImage = edges.filter
    (el => el.node.childImageSharp.fluid.originalName === "heroImage.png")
      [0].node.childImageSharp.fluid;
  // ...
}

export const query = graphql`
{
  allFile(filter: {
    extension: {eq: "png"},
    sourceInstanceName: {eq: "images"}},
    sort: {fields: [childImageSharp___fluid___originalName], order: ASC})
  {
    edges {
      node {
      childImageSharp {
          fluid(maxWidth: 300, quality: 50) {
            originalName
            ...GatsbyImageSharpFluid
          }
        }
      }
    }
  }
}
`;

【讨论】：