Querying similar posts

Developing with Prismic
1

Hi Geetings!,
I am working on Nuxt3 project with Prismic may i know how do i pull similar posts the code below

<script setup >
import { components } from '~/slices'

const prismic = usePrismic()
const route = useRoute()

 // Query post
const { data: article } = await useAsyncData(route.params.uid, async () => {
  const document = await prismic.client.getByUID("article", route.params.uid);
  if (document) {
    return document;
  } else {
    throw createError({ statusCode: 404, message: "Page not found" });
  }
});

 // Query related posts
const { data: latestArticles } = useAsyncData('$latestArticles', () =>
  prismic.client
  .getAllByType("article", {
    limit: 3,
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
  })
  .predicates.similar( article.id, 3)
)

 // Add your date formatting logic here
const formatPublicationDate = (date) => {
  const formattedDate = new Intl.DateTimeFormat('en-US', {
    year: 'numeric',
    month: 'long',
    day: 'numeric',
  }).format(new Date(date));
  return formattedDate;
};

</script>
2

Hi @vickywitvicky. Can you provide some more information about this? What exactly are you trying to do? Is the code you provided working for you or not? If not, what is the error or issue that you're seeing?

3

Sorry for not clear enough I'm actually created Custom type called tags. Then i have assigned my created articles to Tags through content relationship which i have created on Page type file called article.
Now i have created [uid].vue which contains my article details where all the content goes here. However i was not able to pull the articles similar to the article we browse through. For example let say i have 2 tags one is Science and another is Maths. Now im in the article based on the Science Tag and i wanted all my related article to Science below the content page currently its not working based on the code i provided.

Thank you Mr.Levi

5

Thanks for the clarification. The query filter you're trying to use needs to be added to the query options. It will look something like this:

 // Query post
const article = await useAsyncData(route.params.uid, async () => {
  const document = await prismic.client.getByUID("article", route.params.uid);
  if (document) {
    return document;
  } else {
    throw createError({ statusCode: 404, message: "Page not found" });
  }
});

// Query related posts
const { data: latestArticles } = useAsyncData('$latestArticles', () =>
  prismic.client
  .getAllByType("article", {
    limit: 3,
    orderings: [
      { field: "my.article.publishDate", direction: "desc" },
      { field: "document.first_publication_date", direction: "desc" },
    ],
    filters: [
      prismic.filter.similar( article.id, 3 ),
    ],
  })
)

Note 1: I had to modify the way you define the article variable on the first query to get access to the article's ID.

Note 2: the similar filter will provide similar articles based on keywords it finds in the article. It won't necessarily return articles with the exact same tags.

7

Thank you very much Mr. Levi
Another thing
image
how do i query the tags from the tag section not sure the one i made was a proper way using custom type?

8

You can query all the tags in your repository using the Tags API.

10

Thank you very much for your guide Mr Levi.

1 Like