Gatsby GraphQL 无法查询 Strapi 类型 "File" 上的字段 "url"

Question

我正在使用 Gatsby 前端和 Strapi 后端创建博客。我在组件中使用 StaticQuery

进行了查询

query={graphql`
        query {
          allStrapiArticle {
            edges {
              node {
                strapiId
                title
                category {
                  name
                }
                image {
                  url
                }
              }
            }
          }
        }
      `}

没有 image{url}，所有领域都可以正常工作。我收到错误：error Cannot query field "url" on type "File" graphql/template-strings。我该如何解决？谢谢！

Answer 1

尽管您已经在 Strapi 中创建了一个带有 url 字段的图像对象，但 Strapi + Gatsby 会下载它并且您必须稍微更改您的查询。

此时，您所有的图像都属于 gatsby-source-filesystem，因此必须以不同的方式查询它们。当然，您可以获得 url 但您的数据结构可能与您在 Strapi 后台创建的数据结构不同。换句话说，您要查找的字段在另一个对象中，在这种情况下，publicURL 将包含您想要的 url 值。以下是如何获取一张或多张图片的示例：

    singleImage {
     publicURL
    }
    multipleImages {
      localFile {
        publicURL
      }
    }

参考：https://github.com/strapi/gatsby-source-strapi

当你运行在localhost:8000/___graphql playground 下开发一个 gatsby 来测试你的 GraphQL 查询时，看看自动完成，它可能会帮助你获得你需要的字段。

This tutorial 也指出了一些有趣的东西。

如果你想使用基于gatsby-image的图片，你可以使用：

  image {
    childImageSharp {
      fluid(maxWidth: 960) {
        ...GatsbyImageSharpFluid
      }
    }
  }

然后它应该在循环中使用（使用 gatsby-image）：

<Img fluid={data.allStrapiArticle.edges[position].index.image.childImageSharp.fluid} />

Answer 2

我也遇到过这个问题。 Strapi上的教程建议用'url'查询，但这是错误的。

正确的查询方式是：

      allStrapiArticle {
        edges {
          node {
            strapiId
            title
            category {
              name
            }
            image {
              publicURL
            }
          }
        }
      }

为了显示图片，不要忘记将 url 换成 publicURL 这样：

  <img
    src={article.node.image.publicURL}
    alt={article.node.image.publicURL}
    height="100"
  />

Gatsby GraphQL 无法查询 Strapi 类型 "File" 上的字段 "url"

Gatsby GraphQL cannot query field "url" on type "File" of Strapi

graphql

strapi

gatsby