How to work around GraphQL error, field "x" must not have a selection since type "String" has no subfields

Question

I am using Gatsby and GraphQL, and I am new to GraphQL.

I have the following schema definition:

exports.createSchemaCustomization = ({ actions }) => {
  const { createTypes } = actions;
  const typeDefs = `
    type MarkdownRemark implements Node {
      frontmatter: Frontmatter
    }
    type Frontmatter {
      title: String!
      products: [Product]
    }
    type Product @dontInfer {
      name: String!
      price(price: Int = 1): Float
      description: String
      images: [ProductImage]
    }
    type ProductImage {
      url: String
    }
  `;
  createTypes(typeDefs);
};

Then on my page I use the following query:

query {
  markdownRemark(fileRelativePath: { eq: "/content/pages/products.md" }) {
    ...TinaRemark
    frontmatter {
      title
      products {
        name
        price
        description
        images {
          url {
            childImageSharp {
              fluid(maxWidth: 1920) {
                ...GatsbyImageSharpFluid_withWebp
              }
            }
          }
        }
      }
    }
    html
  }
}

I then receive the following error:

Field "url" must not have a selection since type "String" has no subfields.

Does anyone have any suggestions on how to work around this error?

Also, what is childImageSharp? I'm wondering what the terminology is to define it. Is it a GraphQL "selector" or "function"?

Snipes

Either your query or your schema is wrong, if url: String then what are you expecting from e.g. childImageSharp? – Tran

childImageSharp builds a new object containing a fluid object. – Snipes

if object then not string ... it's a plugin (docs/'working with inages') ... returns object childImageSharp with properties inside ... fluid { src ? – Pattiepattin

Thanks. Is "plugin" the generally accepted term for things like childImageSharp? – Snipes

Answer 1

For what it's worth (I don't know if this is related to your specific issue.) If your markdown path for the image file is invalid, GraphQL will return this error, interpreting the path as a string. I had this problem and it went away when I realized I had misspelled the path in the markdown.

productImage { childImageSharp { gatsbyImageData(width: 200) } }

Ellord

Thanks. I had this exact problem with my blog. I would move my unfinished posts to a "PRIVATE" directory so that they wouldn't be sourced if I rebuilt the site. These posts would have a frontmatter field, "embedded", with images—with the wrong paths, obviously, since they're in a different directory. But, even though they're not sourced, they cause errors. The solution is to fix the path or delete the post. It's an extra "gotcha" since the error doesn't show in the development environment—only when Netlify tries to build the site. – Savor

Answer 2

It should be

query {
  markdownRemark(fileRelativePath: { eq: "/content/pages/products.md" }) {
    ...TinaRemark
    frontmatter {
      title
      products {
        name
        price
        description
        images {
          url 
        }
      }
    }
    html
  }
}

Because you definition is

 type ProductImage {
      url: String
    }

The url apparently has no sub fields.

Hagerty

Answer 3

I had a similar problem with returning a boolean. For me, instead of something like this

mutation {
   someFunc(
      memo: "test memo"
  ) {
     success
  }
}

I needed this

mutation {
   someFunc(
      memo: "test memo"
  ) 
}

Galer

can you elaborate ? where is the expected boolean now ? – Urticaceous