Gatsby GraphQL不能在Strapi的"File“类型上查询字段"url”

Question

我在用盖茨比的前端，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操场下运行gatsby开发以测试您的GraphQL查询时，请看一下自动完成，它可能会帮助您获得所需的字段。

本教程还指出了一些有趣的东西。

如果要使用gatsby-image-based映像，可以使用：

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

然后，它应该在循环中使用，类似于(使用gatsby-image )：

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

Answer 2

我也面临过这个问题。关于斯特拉皮的教程建议使用“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"
  />