Search code examples
vue.jsvuejs3vue-composition-apiprismic.io

Getting data out from Prismic based on type and value of a field

My question would be how is it possible to get data out from Prismic based on type and value of a field, and order it based on another field in Vue 3 with the Composition API.

For example, let's say we have a custom type for football players. A player has a position dropdown field, where you can select their position, and a field for their jersey number.

const { data: players } = useAllPrismicDocumentsByType("player")

I understand that this is a basic way to fetch the data, but how would i add filtering and the order? For example in the document, the position field has to be Goalkeeper, so i would only get the Goalkeepers out, and order them based on their jersey number (ascending).

Solution

  • You would add filters and orderings to your Prismic query:

    import * as prismic from "@prismicio/client";

const { data: players } = useAllPrismicDocumentsByType("player", {
  filters: [
    prismic.filter.at("my.player.position", "Goalkeeper")
  ],
  orderings: [
    { field: "my.player.number", direction: "asc" }
  ]
})