使用imageSharp regex和gatsby的graphQL中出现错误 [英] error in graphQL using imageSharp regex with gatsby

问题描述

我正在使用gatsby创建一个简单的博客.当我尝试搜索特定图像时，出现来自graphql的错误.我有以下配置:

I'm using gatsby to create a simple blog. When I try to search for an specific image, I get an error from graphql. I have the following configs:

已安装"gatsby-image": "^1.0.55"

graphql`
      query MainLayoutQuery {
        heroImage: imageSharp(id: { regex: "/hero.jpg/" }) {
          id
          sizes(quality: 100) {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    `

当我在graphql ui中运行该查询时，我得到:

when I run that query in graphql ui I get:

{
  "errors": [
    {
      "message": "Cannot read property 'id' of undefined",
      "locations": [
        {
          "line": 31,
          "column": 3
        }
      ],
      "path": [
        "heroImage"
      ]
    }
  ],
  "data": {
    "heroImage": null
  }
}

但是，如果我在不使用正则表达式的情况下运行相同的查询，则效果很好:

But, if I run the same query without the regex, it works fine:

{
  heroImage: imageSharp {
    id
    sizes(quality: 100) {
      base64
      tracedSVG
      aspectRatio
      src
      srcSet
      srcWebp
      srcSetWebp
      sizes
      originalImg
      originalName
    }
  }
}

当然，它会带来它可以访问的第一张图片

Of course, it brings the first image it has access to

"data": {
    "heroImage": {
      "id": "/Users/marcosrios/dev/workspace/atravesando-todo-limite/src/posts/2018-08-25-tengo-miedo/cover.png absPath of file >> ImageSharp"
    }
}

推荐答案

您正在使用哪个版本的盖茨比?如果v2，您需要编辑查询，因为已经进行了更改: https://next. gatsbyjs.org/docs/migrating-from-v1-to-v2/#dont-query-nodes-by-id

Which version of Gatsby are you using? If v2 you need to edit your query as there has been changes: https://next.gatsbyjs.org/docs/migrating-from-v1-to-v2/#dont-query-nodes-by-id

您的查询将如下所示:

graphql`
      query MainLayoutQuery {
        heroImage: imageSharp(fluid: { originalName: { regex: "/hero.jpg/" } }) {
          id
          fluid(quality: 100) {
            base64
            tracedSVG
            aspectRatio
            src
            srcSet
            srcWebp
            srcSetWebp
            sizes
            originalImg
            originalName
          }
        }
      }
    `

这篇关于使用imageSharp regex和gatsby的graphQL中出现错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！