Gatsby GraphQL 无法在 Strapi 的“文件”类型上查询字段“url”

Posted 2023-03-08

【中文标题】Gatsby GraphQL 无法在 Strapi 的“文件”类型上查询字段“url”

【英文标题】：Gatsby GraphQL cannot query field "url" on type "File" of Strapi

【发布时间】：2020-10-29 13:03:19

【问题描述】：

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

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

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

【问题讨论】：

该字段是否存在？

是的，当然，我添加了一个图像类型的字段，单个图像，必填。还可以用图片创建文章

您可能应该在image 对象中通过publicURL 而不是url 进行查询。

【参考方案1】：

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

查询的正确方法是：

      allStrapiArticle 
        edges 
          node 
            strapiId
            title
            category 
              name
            
            image 
              publicURL
            
          
        
      

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

  <img
    src=article.node.image.publicURL
    alt=article.node.image.publicURL
    
  />

【参考方案2】：

尽管您在 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/___graphqlplayground 下运行一个 gatsby develop 来测试你的 GraphQL 查询时的自动补全，它可能会帮助你获得你需要的字段。

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

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

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

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

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