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

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!

Yes, of course, I added a field with Image type, single Image, required. Also create a article with image — dungreact, Jul 09 '20 at 05:20
You should probably query by `publicURL` instead of `url` inside the `image` object. — Marco Daniel, Jul 09 '20 at 05:38

score 4 · Answer 1 · answered Jul 16 '20 at 17:58

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"
  />

Ferran Buireu · Accepted Answer · 2020-07-09T09:54:20.743

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} />

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

2 Answers2