Keep the features placeholder out of site queries

[mbifulco]

What this PR Contains

This is largely a fix for a problem I was having as I was playing around with your starter (it's fantastic - thank you, by the way!). I was finding that after some light modifications to the theme, the features placeholder file was being read and turned into navigable posts. This was only really problematic because it was going to get indexed by google's crawlers eventually, and the buttons pointing to older posts seemed to find that placeholder on occasion.

Caveat emptor: I'm very new to Gatsby, and fairly new to GraphQL, so this may be complete nonsense... but I did find that the changes here seemed to work for me.

FWIW - most of what caused this for me seemed to be wanting to group my posts into subdirectories under the posts folder:

So it's possible that these issues are completely of my own doing. I'd love to hear what you think!

PS - you can check the repo for my site here, and the site itself is currently deployed at https://mike.biful.co. Thanks again for providing a great starter!

[panr]

Hi @mbifulco, thanks for this PR and kind words! The issue with features-placeholder struggles me for a while. At the beginning file wasn't attached to the starter because I presumed that query for empty (or non existing) fields in Gatsby will return null but unfortunately when you have eg. coverImage in query and none of your post hasn't it in the frontmatter, then Gatsby won't build, because of an error of non existing field...

I have no idea how to fix it and make it work in all possible scenarios, so I decided to add this dummy file to the posts dir...

The problem is that you need to have at least one post file with coverImage field for Gatsby to build. If you're using coverImage field you can remove this hidden file and everything will work great 👌

The changes in this PR are OK, but only in your case, because as I see, you're using coverImage filed ;-(

[mbifulco]

Ah, that's interesting! I'll give that a shot and let you know what I find. Your comment above might be a great addition to the README on this repo to explain when you can get rid of that file...

[panr]

Yeah, I've just thought that this will be a good idea ;-D

It would be awesome if you could figure it out and help me with this! 🙌

[mbifulco]

It looks like you're right - what a strange problem. I wonder if missing data is strictly a GraphQL thing, or a Gatsby thing. I've got an additional problem in that I don't use the author field, so I'll need to remove that from the graphQL in my source, too. It'd be great if there was a better way!

[mbifulco]

@panr it looks like this is a larger Gatsby issue at play - https://github.com/gatsbyjs/gatsby/issues/2392

[panr]

@mbifulco yes, I'm aware of this issue ;-(

[maddovr]

This might be useful (sorry if I downright disappeared but I'm preparing an important exam) https://github.com/Ganevru/gatsby-starter-blog-grommet/blob/master/src/templates/blog-post.tsx

If it's not fixed by the time I'm over my exams, I'm gonna investigate it.

[panr]

Hi guys, I think I've fixed it! Maybe it's not as elegant as I wanted to... but...

Please take a look — https://github.com/panr/gatsby-starter-hello-friend/commit/792893cfd77ea995ea50124ef846eeea4042977f#diff-fda05457e393bada716f508859bfc604R128

Is there a better way to return at least one default value for coverImage? I tried some fake childImageSharp object, but it didn't work... I think it needs at least one source file... 🤔

Thats why I kept this fake 1x1px image-placeholder to add this field to the schema...

When none of the posts has coverImage, query looks like this (only first post get fake coverImage value):

{
  "node": {
    "frontmatter": {
      "title": "Hello Friend",
      "excerpt": "",
      "coverImage": {
        "childImageSharp": {
          "fluid": {
            "src": "/static/5ccba0bd4ea750c157b67401bc793420/bf28e/image-placeholder.png"
          }
        }
      }
    }
  }
},
{
  "node": {
    "frontmatter": {
      "title": "Example",
      "excerpt": "",
      "coverImage": null
    }
  }
},

and with at least one coverImage:

{
  "node": {
    "frontmatter": {
      "title": "Hello Friend",
      "excerpt": "",
      "coverImage": {
        "childImageSharp": {
          "fluid": {
            "src": "/static/6871f6b27b75646eb567bc25cd7d7d24/2aad9/hello.jpg"
          }
        }
      }
    }
  }
},
{
  "node": {
    "frontmatter": {
      "title": "Example",
      "excerpt": "",
      "coverImage": null
    }
  }
},

What do you think?

[panr]

@maddovr @mbifulco ping ping 😉

[mbifulco]

Hey @panr - thanks for the updates! To be honest, I found the gatsby markdown experience to be so disappointing that I ended up plugging a CMS into mine. I now use TakeShape for my site. I'd imagine the free tier will work for the vast majority of folks using this template, but I ended up on their cheapest paid tier to take advantage of webhooks.

Your changes look good to me, though - I like the addition of tags. I went through and did the same myself, which you can check out here. My repo is here if you want to check out the TakeShape integration. It was really a very easy swap!

[panr]

OK, I'll look at it. Thanks! 😉

[panr]

Thanks to Gatsby new schema features, I've fixed this issue 💪 No placeholders at all!

[mbifulco]

Whoa right on! Do you have more information about those new features you can link to?

[panr]

Sure, here it is — https://www.gatsbyjs.org/blog/2019-03-18-releasing-new-schema-customization/ and some API doc https://www.gatsbyjs.org/docs/actions/#createTypes