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

Question

I'm making a blog with Gatsby front-end, Strapi back-end. I made a query in component with StaticQuery

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

All of field is work fine without image{url} . I got error: error Cannot query field "url" on type "File" graphql/template-strings . How can I fix it? Thanks!

Answer 1

I have faced this problem too. Tutorial on Strapi suggest to query with 'url' but it's wrong.

The right way to query is to do:

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

In order to display image, don't forget to swap url into publicURL like that:

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

Answer 2

Despite you've created an image object with an url field in Strapi, Strapi + Gatsby downloads it and you must change a bit your query.

At this point, all your images belong to gatsby-source-filesystem so they must be queried in a different way. Of course, you can get the url but your data structure may differ from the one you've created in Strapi's back office. In other words, the field you are looking for is inside another object, in this case, the publicURL will contain your desired url value. Here's a sample of how to get one or multiple images:

    singleImage {
     publicURL
    }
    multipleImages {
      localFile {
        publicURL
      }
    }

Reference: https://github.com/strapi/gatsby-source-strapi

Take a look at the autocompletion when you run a gatsby develop under localhost:8000/___graphql playground to test your GraphQL query, it may help you to get the fields you need.

This tutorial also points out some interesting stuff.

If you want to use a gatsby-image -based image, you can use:

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

Then it should be used in a loop something like (with gatsby-image usage):

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