Non-published posts are accessible directly and in tag pages

[mbillard]

Proof:

• https://gridsome-starter-blog.netlify.com/say-hello-to-gridsome/
• https://gridsome-starter-blog.netlify.com/tag/releases/

The "Say Hello to Gridsome" post is not published but still shows up. I'm new to Gridsome and GraphQL so I'm not sure exactly where the filtering is supposed to be happening. My guess would be that the nodes shouldn't even exist so it'd be somewhere in the gridsome.config.js.

Related to #12 but its fix (#20) only removes posts from the index.

[MattMcAdams]

I'm sure there's a better way to do this with GraphQL but I'm not familiar enough with it to figure it out. I've managed to hide published articles using v-for and v-if. This is not a good solution but works in a pinch.

GraphQL

<page-query>
query Tag ($id: ID!) {
  tag (id: $id) {
    title
    belongsTo {
      edges {
        node {
          ...on Post {
            title
            path
            date (format: "D. MMMM YYYY")
            timeToRead
            description
            content
            published
          }
        }
      }
    }
  }
}
</page-query>

Vue

<template>
  <Layout>
    <h1 class="tag-title text-center space-bottom">
      # {{ $page.tag.title }}
    </h1>

    <div class="posts">
      <PostCard v-for="edge in $page.tag.belongsTo.edges" v-if="edge.node.published" :key="edge.node.id" :post="edge.node"/>
    </div>
  </Layout>
</template>

This works for me but is more limited than a GraphQL solution and it does throw a linting warning:

[vue/no-use-v-if-with-v-for]
The 'undefined' variable inside 'v-for' directive should be replaced with a computed property that returns filtered array instead. You should not mix 'v-for' with 'v-if'.