Nate's Blog

Readers of the blog will now see links to previous and next blog posts at the bottom of the page! I've accomplished this via what feels like a hack, as it's really not a scaleable solution... but it works for now!

At a high level -

• I added a new graphQL query that gets the path, title and date of ALL published blog posts.
• I've created three Vue computed properties to grab the current post index, previous post and next post.
• I've added links to the previous and next computed posts.

---

The new GraphQL query -

1<static-query>
2query {
3  posts: allPost(filter: { published: { eq: true }}, sortBy: "date", order: ASC) {
4    edges {
5      node {
6        id
7        title
8        path
9         }
10       }
11     }
12   }
13</static-query>
14
graphQL

The above query grabs all posts that are published, ordered by published date.

---

The new Vue computed properties -

1computed:{
2    currentIndex(){
3      return this.$static.posts.edges.map(edge => edge.node.path).indexOf(this.$page.post.path)
4    },
5    nextPost(){
6      if(this.currentIndex < this.$static.posts.edges.length -1){
7        const nextIndex = this.currentIndex + 1;
8        return this.$static.posts.edges[nextIndex].node
9      }
10      else{
11        return -1
12      }
13    },
14      previousPost(){
15      if(this.currentIndex > 0){
16        const previousPost = this.currentIndex - 1;
17        return this.$static.posts.edges[previousPost].node
18      }
19      else{
20        return -1
21      }
22    }
23  }
24
javascript

The first computed property - currentIndex - grabs the index of the current post with relation to the posts query. I convert the list of all posts to a list of the post paths via a map statement, and then use .indexOf(path) to return an index value. This will be my 4th published post, so the index will be 3.

The second and third computed properties - nextPost and previousPost take the currentIndex value, check that there won't be an index out of range error, and then returns that post value.

---

Adding the links on the page

1<ul
2      :style="{
3            display: `flex`,
4            flexWrap: `wrap`,
5            justifyContent: `space-between`,
6            listStyle: `none`,
7            padding: '2em',
8          }"
9    >
10      <li v-if="previousPost">
11        <g-link :to="previousPost.path"> {{previousPost.title}} </g-link>
12      </li>
13      <li v-if="nextPost">
14        <g-link :to="nextPost.path"> {{nextPost.title}} </g-link>
15      </li>
16    </ul>
17
html

At the bottom of the `Post.vue` template that is used to render all the posts, I've added the above code to render the previous and next posts, if they exist. -1 coalesces to false, which is nice, because we can v-if="previousPost" instead of v-if="previousPost != -1". We have the path and the title from our graphql query, which we use for linking and display.

---

wrap up

And that's it! I refer to this as hacky, since if I find myself at a point where I have 1000 blog posts, every blogpost pageload is going to pull ALL 1000 posts into memory to find the next and previous post. Obviously not ideal, but functioning for now!!

Thanks for reading.