Can I query all documents of a type inside nuxt 2 component using fetch?

Developing with Prismic
, ,
1

Works only on page load!
On route navigation doesn't, gives null

Here is the code:

    async fetch() {
      this.data = await this.$prismic.api.query(this.$prismic.predicates.at('document.type', 'gallery'), {
        orderings: '[my.gallery.year desc]',
      });
    },

Thanks in advance

3

Hello @thezumrad

Thanks for reaching out to us.

I don't understand what you are trying to achieve.

The fetch is called but only finishes after the page is mounted. When you refresh the page, the data should be cached on the client side.

If you want data retrieved before the first mount, use asyncData and await the call. It will be called before the page is mounted.

Here is the link of the nuxt lifecycle: Understanding Difference Between Asyncdata Fetch Nuxt

Let me know if you need any further assistance.

Thanks,
Priyanka

1 Like
4

Hey @Priyanka!
Thank you for answering

What I wanna achieve is to call all documents under the type name gallery. For this case, I need to use query and predicates. This fetch happens in components/gallery.vue, not in page that is why I can not use asyncData() as it can be used only in pages.

If I directly open this route with gallery.vue component inside the page in the browser it fetches all documents. But if come to this route from homepage or another route it returns null. The thing I wanna find out is if query and predicates work inside components using fetch otherwise I do workaround.

Thanks