带有 gatsby 图像的 Airtable gatsby 源插件

Question

所以我正在使用 gatsby-source-airtable 从我的 airtable 中提取图像。

在我的 gastby-config 中，我将我的附件列映射为文件节点：

mapping: {'image':fileNode},

在 GraphiQL gatsby 图像插件中似乎可以正常工作此查询：

{
airtable(table: {
    eq: "table-1"
}, data: {
    slug: {
        eq: "test-1"
    }
}) {
    data {
        image {
            localFiles {
                childImageSharp {
                    fluid(maxWidth: 400) {
                        src
                    }
                }
            }
        }
    }
}

}

提供此响应：

{
"data": {
    "airtable": {
        "data": {
            "image": {
                "localFiles": [{
                    "childImageSharp": {
                        "fluid": {
                            "src": "/static/08baa0d1735184a4d0dd141d90f564d4-28158c2eb0b0b748efeabc0ec551c623-7eb65.jpg"
                        }
                    }
                }]
            }
        }
    }
}

}

然后转到那个 src 生成图像并出现在浏览器中。

然而，当我尝试将它与 gatsby-image 一起使用时：

<Img fluid={post.data.image.localFiles.childImageSharp.fluid} />

    export const query = graphql query PostQuery {
    airtable(table: {
        eq: "table-1"
    }, data: {
        slug: {
            eq: "test-1"
        }
    }) {
        data {
            image {
                localFiles {
                    childImageSharp {
                        fluid(maxWidth: 400) { ...GatsbyImageSharpFluid
                        }
                    }
                }
            }
        }
    }
}

我收到这个错误：

WebpackError: TypeError: 无法读取未定义的属性 'fluid'

我做错了什么？任何助手将不胜感激

Answer 1

您没有将数据传递给您的 gatsby 图像组件之一，因此会引发错误。尝试在运行 gatsby develop 的同时点击您的页面，看看发生了什么。此外，任何错误报告或日志都会有所帮助。

Answer 2

查询 image 上的 localFiles 字段将为您提供一个数组。在 GraphiQL 中测试查询：

Note that you'll have to replace the ...GatsbyImageSharpFluid fragment (not supported by GraphiQL) with another field like src

airtable(table: {
  eq: "table-1"
}, data: {
  slug: {
    eq: "test-1"
  }
}) {
  data {
    image {
      localFiles {
        childImageSharp {
          fluid(maxWidth: 400) {
            src
          }
        }
      }
    }
  }
}

你应该得到类似的东西：

{
  "data": {
    "airtable": {
      "data": {
        "image": {
          "localFiles": [
            {
              "childImageSharp": {
                "fluid": {
                  "src": "/static/8a6a13a2664ef8330843b7855ad2c5e2/d278e/o.jpg"
                }
              }
            }
          ]
        }
      }
    }
  }
}

如你所见，localFiles 是一个数组，所以在你的组件中你应该这样写：

<Img fluid={post.data.image.localFiles[0].childImageSharp.fluid} />

带有 gatsby 图像的 Airtable gatsby 源插件

Airtable gatsby source plugin with gatsby image

gatsby

airtable