Pages with next/prev links in Gridsome 0.6.x

ContentPostPage.vue

<template>
	<layout>
		<!-- Here there be markup... -->
	</layout>
</template>

<page-query>
query Chapter ($id: String, $prevId: String, $nextId: String) {
	post: contentPost (id: $id) {
		title,
		date,
		content
	},
	prevPost: contentPost (id: $prevId) {
		path
	},
	nextPost: contentPost (id: $nextId) {
		path
	}
}
</page-query>

<script>
export default {
	name: 'ContentPostPage',
	metaInfo () {
		return {
			title: this.$page.post.title,
			link: this.metaLinks
		}
	},
	computed: {
		prevUrl () {
			if (!this.$page.prevPost) return null
			// FIXME: remove trailing slash when 0.7 comes out
			return this.$page.prevPost.path + '/'
		},
		nextUrl () {
			if (!this.$page.nextPost) return null
			// FIXME: remove trailing slash when 0.7 comes out
			return this.$page.nextPost.path + '/'
		},
		metaLinks () {
			const links = []
			this.prevUrl && links.push({rel: 'previous', href: this.prevUrl})
			this.nextUrl && links.push({rel: 'next', href: this.nextUrl})
			return links
		}
	}
}
</script>

<style lang="less">
// Here there be styles...
</style>

gridsome.server.js

module.exports = function (api) {
	// Create page entries for every post; this allows us to explicitly associate a next and
	// previous ID with a given page
	api.createPages(async ({ graphql, createPage }) => {
		const { data } = await graphql(`
			query ContentPosts {
				posts: allContentPost (order: ASC) {
					edges {
						node {
							id,
							date,
							path
						}
					}
				}
			}
		`)

		data.posts.edges.forEach(({ node }, i, edges) => {
			const prev = edges[i - 1]
			const next = edges[i + 1]
			// Create a page that will allow loading full GraphQL data for next/previous/current;
			// since this lives at the same path, we can effectively hijack the content rendering
			createPage({
				path: node.path,
				component: './src/templates/ContentPostPage.vue',
				queryVariables: {
					id: node.id,
					prevId: (prev && prev.node.id) || null,
					nextId: (next && next.node.id) || null
				}
			})
		})
	})
}