Hello,
I am wondering if there is some way to query the previous and following (blog) post to the current one?
Best
Constantin
Hey Constantin,
Welcome to the community!
I’ll be happy to help. Can you tell me if you are using the Rest API or GraphQL?
Thanks.
I am using the Rest API.
I don’t have any examples just now. I’m going to work on one to give you tomorrow hopefully.
Hey Constantin,
Sorry about the delay. I’ve got an example for you now.
So what you need to do is make 2 extra queries in your post, being that you’re using nuxt this won’t slow your project down.
For the first query for your ‘next’ article will be to get all results on the post type, then limit the result size to 1, then you set the query option ‘after’ to get the only the next document.
The idea is that then you reverse order to get your ‘previous’ article. You do this using the orderings option.
Here’s what you’re 2 queries should look like:
const prevpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date desc]'})).results[0]
const nextpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date]'})).results[0]
You’ll then return the results to the template and pass them through the link resolver and use the Nuxt-link component like so:
<nuxt-link v-if="prevpost !== undefined" :to="$prismic.linkResolver(prevpost)">
<p>Previous Post</p>
</nuxt-link>
<nuxt-link v-if="nextpost !== undefined" :to="$prismic.linkResolver(nextpost)">
<p>Next Post</p>
</nuxt-link>
You can see it’s best to do a check to remove the link if there are no articles to link.
Here is my full example based off of our sample nuxt blog:
<template>
<div>
<div class="outer-container">
<div class="back">
<nuxt-link to="../">back to list</nuxt-link>
</div>
<!-- Template for page title -->
<h1 class="blog-title">{{ $prismic.asText(document.title) }}</h1>
<!-- Template for published date -->
<p class="blog-post-meta"><span class="created-at">{{ formattedDate }}</span></p>
</div>
<!-- Slice Block Componenet tag -->
<slices-block :slices="slices"/>
<nuxt-link v-if="prevpost !== undefined" :to="$prismic.linkResolver(prevpost)">
<p>Previous Post</p>
</nuxt-link>
<nuxt-link v-if="nextpost !== undefined" :to="$prismic.linkResolver(nextpost)">
<p>Next Post</p>
</nuxt-link>
</div>
</template>
<script>
//Importing all the slices components
import SlicesBlock from '~/components/SlicesBlock.vue'
export default {
name: 'post',
components: {
SlicesBlock
},
head () {
return {
title: 'Prismic Nuxt.js Blog'
}
},
async asyncData({ $prismic, params, error }) {
try{
// Query to get post content
const post = (await $prismic.api.getByUID('post', params.uid))
const prevpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date desc]'})).results[0]
const nextpost = (await $prismic.api.query($prismic.predicates.at('document.type', 'post'), { pageSize : 1 , after : `${post.id}`, orderings: '[my.post.date]'})).results[0]
// Returns data to be used in template
return {
document: post.data,
slices: post.data.body,
prevpost,
nextpost,
formattedDate: Intl.DateTimeFormat('en-US', { year: 'numeric', month: 'short', day: '2-digit' }).format(new Date(post.data.date)),
}
} catch (e) {
// Returns error page
error({ statusCode: 404, message: 'Page not found' })
}
}
}
</script>
Let me know if you have any questions.
Thanks.
2 Likes
Thank you very much! The ‘after’ query option was exactly what I was looking for.
1 Like