stevanpopo commented 4 years ago

Description

I have added an image to a blog post (via frontmatter) that I am trying to access via a GraphQL query but fails on the build.

Code

My frontmatter

---
title: "How To Choose The Right Coding Bootcamp"
featuredImage: ./codebootcamps.jpg
---

Note - This frontmatter exists in an index.md file which is a sibling to the image. post_folder --> index.md --> codebootcamps.jpg

My query

export const pageQuery = graphql`
  query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        date(formatString: "MMMM DD, YYYY")
        title
        featuredImage {
          childImageSharp {
            sizes(maxWidth: 630) {
              ...GatsbyImageSharpSizes
            }
          }
        }
      }
    }
  }
`

Expected result

Image path to be available in blog post on render.

Actual result

The build fails with this error: GraphQL Error Field "featuredImage" must not have a selection since type "String" has no subfields.

This result is confirmed when I view in GraphiQL.

Environment

I have both gatsby-transformer-sharp and gatsby-plugin-sharp installed.

System:
    OS: macOS 10.14.5
    CPU: (4) x64 Intel(R) Core(TM) i5-4250U CPU @ 1.30GHz
    Shell: 5.5.1 - /usr/local/bin/zsh
  Binaries:
    Node: 9.4.0 - ~/.nvm/versions/node/v9.4.0/bin/node
    Yarn: 1.6.0 - /usr/local/bin/yarn
    npm: 6.9.0 - ~/.nvm/versions/node/v9.4.0/bin/npm
  Languages:
    Python: 2.7.6 - /usr/local/bin/python
  Browsers:
    Chrome: 79.0.3945.88
    Safari: 12.1.1
  npmPackages:
    gatsby: ^2.13.50 => 2.13.50
    gatsby-image: ^2.2.8 => 2.2.8
    gatsby-plugin-feed: ^2.3.6 => 2.3.6
    gatsby-plugin-force-trailing-slashes: ^1.0.4 => 1.0.4
    gatsby-plugin-google-analytics: ^2.1.6 => 2.1.6
    gatsby-plugin-manifest: ^2.2.4 => 2.2.4
    gatsby-plugin-offline: ^2.2.4 => 2.2.4
    gatsby-plugin-react-helmet: ^3.1.3 => 3.1.3
    gatsby-plugin-sass: ^2.1.15 => 2.1.15
    gatsby-plugin-sharp: ^2.2.9 => 2.2.9
    gatsby-plugin-sitemap: ^2.2.16 => 2.2.16
    gatsby-plugin-twitter: ^2.1.9 => 2.1.9
    gatsby-plugin-typography: ^2.3.2 => 2.3.2
    gatsby-remark-copy-linked-files: ^2.1.4 => 2.1.4
    gatsby-remark-images: ^3.1.7 => 3.1.7
    gatsby-remark-prismjs: ^3.3.4 => 3.3.4
    gatsby-remark-responsive-iframe: ^2.2.4 => 2.2.4
    gatsby-remark-smartypants: ^2.1.2 => 2.1.2
    gatsby-source-filesystem: ^2.1.8 => 2.1.8
    gatsby-transformer-remark: ^2.6.10 => 2.6.10
    gatsby-transformer-sharp: ^2.2.5 => 2.2.5
  npmGlobalPackages:
    gatsby-cli: 2.7.15

Thanks for any help in advance. I appreciate your time.

stevanpopo commented 4 years ago

Does it make a difference that I'm resolving images from multiple locations?

gatsby-config.js

module.exports = {
  siteMetadata: {
    title: `codewithbootcamps.com`,
    author: `Stevan Popovic`,
    description: `Find, compare and choose the best coding bootcamp in London and kick-start your switch to a career in software development.`,
    siteUrl: `https://www.codewithbootcamps.com/`,
  },
  plugins: [
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/brands`,
        name: `brands`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/blog`,
        name: `blog`,
      },
    },
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        path: `${__dirname}/content/assets`,
        name: `assets`,
      },
    },
    {
      resolve: `gatsby-transformer-remark`,
      options: {
        plugins: [
          {
            resolve: `gatsby-remark-images`,
            options: {
              maxWidth: 740,
              wrapperStyle: `margin-bottom: 2.2rem;`,
            },
          },
          {
            resolve: `gatsby-remark-responsive-iframe`,
            options: {
              wrapperStyle: `margin-bottom: 2.2rem;`,
            },
          },
          `gatsby-remark-prismjs`,
          `gatsby-remark-copy-linked-files`,
          `gatsby-remark-smartypants`,
        ],
      },
    },
    `gatsby-transformer-sharp`,
    `gatsby-plugin-sharp`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: `UA-148403702-1`,
      },
    },
    `gatsby-plugin-feed`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Gatsby Starter Blog`,
        short_name: `GatsbyJS`,
        start_url: `/`,
        background_color: `#ffffff`,
        theme_color: `#663399`,
        display: `minimal-ui`,
        icon: `content/assets/favicon-32x32.png`,
      },
    },
    `gatsby-plugin-offline`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-plugin-typography`,
      options: {
        pathToConfigModule: `src/utils/typography`,
      },
    },
    `gatsby-plugin-sass`,
    `gatsby-plugin-sitemap`,
    `gatsby-plugin-twitter`,
    `gatsby-plugin-force-trailing-slashes`,
  ],
}

jonniebigodes commented 4 years ago

@stevanpopo i saw that you mentioned me in another issue that might be related to this. If you don't mind waiting a bit i'll see what is wrong and come back with a response, sounds good?

stevanpopo commented 4 years ago

@jonniebigodes yep, sounds good. I saw you answered something relevant when I was digging through other issues, so thought you might have some insight here.

It looks like for some reason gatsby-transformer-sharp isn't turning my file paths into file objects.

LekoArts commented 4 years ago

Hi!

Sorry to hear you're running into an issue. To help us best begin debugging the underlying cause, it is incredibly helpful if you're able to create a minimal reproduction. This is a simplified example of the issue that makes it clear and obvious what the issue is and how we can begin to debug it.

If you're up for it, we'd very much appreciate if you could provide a minimal reproduction and we'll be able to take another look.

Thanks for using Gatsby! 💜

jonniebigodes commented 4 years ago

@stevanpopo i've been through this and i think i have a solution for you.

I'm going to describe the steps and what i believe is the cause of the issue.

Created a new gatsby website based on the package versions you have.
Updated gatsby-config.js to match yours.
Added some content for testing purposes. Namely created a new file under src\blog\bootcamps called index.md with the following content:
```
---
title: "How To Choose The Right Coding Bootcamp"
featuredImage: ./codebootcamps.jpg
---
```

This is a dummy blog entry for bootcamps

This is some dummy content to illustrate something something

One bit of information

- Copied over a dummy image to the folder and make both files "siblings".
- Ran `gatsby develop` and the build goes through without any issue.
- Ran `gatsby clean` to get a clean slate and then issued `gatsby build && gatsby serve` and i'm presented with the issue.
- Went back to development mode and opened `http://localhost:8000/___graphql` ran the query and i'm presented with the following:

![stevan_popo1](https://user-images.githubusercontent.com/22988955/72174072-cb956080-33d0-11ea-9b7f-f27965600faa.png)

- Updated the query in the template file to:
```graphql
query BlogPostBySlug($slug: String!) {
    markdownRemark(fields: { slug: { eq: $slug } }) {
      id
      excerpt(pruneLength: 160)
      html
      frontmatter {
        title
        date(formatString: "MMMM DD, YYYY")
        description
        featuredImage {
          childImageSharp {
            fluid(maxWidth: 630) {
              ...GatsbyImageSharpFluid
            }
          }
        }
      }
    }
  }

Opened the blog post i mentioned earlier and i'm presented with:
Ran gatsby clean to once again get a clean slate and ran once again gatsby build && gatsby serve, the build goes through and opening up http://localhost:9000/bootcamps/ i'm presented with the image and content without any issues.

What i would like for you to do is update the query and trigger a build to see if the issue is resolved, if not it could probably be a good thing to create a minimal reproduction like @LekoArts mentioned so that we can take a more detailed look at what might be causing this issue. Sounds good?

stevanpopo commented 4 years ago

@jonniebigodes thank you so much for taking the time to write this detailed response. I must apologise though, as I have wasted your time. On second look, I found the error and it was completely my fault. On one of the posts, I had a typo in the file path, meaning the file wasn't found, turning all of them into strings, rather than file objects. Completely my error. Thanks again for helping anyway.

jonniebigodes commented 4 years ago

@stevanpopo no need to thank, Glad to know that you managed to solve your issue. And it was no problem writing the response.

stevemarksd commented 3 years ago

anyone knows how or who is automatically chosing to convert to an object or a string? I find it a bit fragile that if any field in the frontmatter matches a file path is converted to an image, but if not, is just a string.

gatsbyjs / gatsby

Unable to query frontmatter image - GraphQL Error Field "featuredImage" must not have a selection since type "String" has no subfields. #20498

Description

Code

Expected result

Actual result

Environment

This is a dummy blog entry for bootcamps

One bit of information