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

user_83897 0
Viewed 14498

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

graphql gatsby
3 Answers

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

user_11627250

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.

user_65113230

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"
  ) 
}
user_45335320
Related