How to sort prismic data by name or any other field?

Developing with Prismic
1

I'm using Nuxt 3 with composition api and would like to have a way of ordering my lists by name or by creation date.

I get my prismic data like this:

const { data: werke } = await useAsyncData('werke', () => client.getAllByType('werk'))

I only found older information about using an orderings array.

How would i add something like that in my useAsyncData? I'm not sure where to put the ordering and how I would order for example for here:

<template v-for="werk in werke" :key="werk.data.titel">
     <prismic-rich-text :field="werk.data.titel"
</template>

Would I write my async data like this?

const { data: werke } = await useAsyncData('werke', () => client.getAllByType('werk', {
    orderings: '[werk.data.titel asc]',
  }))

But "werk" is not defined outside the template loop but "werke" has several pages. I'm just a bit confused how sorting works. I'm sure it is easy to do.

Any hints?

2

Hey Tom,

Iā€™m not at my laptop atm but you could try something like:

const { data: werke } = await useAsyncData('werke', () => client.query([
  predicate.at('document.type', 'werk')
], { orderings: '[werk.data.titel asc]' }))
1 Like
3

Thanks @jake i tried it this way, unfortunately It doesn't seem to work.

Here is an example:

fetching the data works here:

const { data: projekte } = await useAsyncData("projekt", () =>
  client.getAllByType("projekt")
);

If I rewrite it with your suggestion I just get a "Null" when I console.log the data:

const { data: projekte } = await useAsyncData("projekt", () =>
  client.query([predicate.at("document.type", "projekt")], {
    orderings: "[projekt.data.projektname asc]",
  })
);

VS Code also complains that query is deprecated and I should use get instead. But changing it also doesn't have any effect.

Oh and if I remove the orderings I also get a null. It seems like I can't get any data with predicate.at for whatever reason?

I also tried it like this but that also doesn't work:

const { data: projekte } = await useAsyncData("projekt", () =>
  client.getAllByType("projekt", {
    orderings: "[projekt.data.projektname asc]",
  })
);

Thanks again for your help!

1 Like
5

Thanks, @jake, for your contribution; I have reached out to our dev team about this, and here is our initial investigation:

It looks like the orderings value they are giving is incorrect.

To sort by the projektname field, the query should look like this:

const { data: projekte } = await useAsyncData("projekt", () =>
  client.getAllByType("projekt", {
    orderings: [
      { field: "my.projekt.projektname", direction: "asc" }
    ],
  })
);

See this page for details on the orderings option: Rest API Technical Reference - Documentation - Prismic

2 Likes
6

Thanks a lot @Fares that worked very well! I did not find that documentation, maybe I should've looked harder.

2 Likes