Query API for a single piece of content

Technologies Nuxt.js
#1

I want to do something super basic but reading through the docs I can't find a way to do this.

My project is on Nuxt.js.

I have a Prismic repository with a custom type "Introduction" (API ID 'introduction'), and in that I have a Title field (API ID 'welcome').

I just want to write a query which will retrieve this field's text.

#3

Hello Chris,

Welcome to the community.

I'm assuming that Prismic endpoint is already defined for your project.

You need to fetch content from the api using either by helper function or by predicates in your page. In pages, you can use asyncData hook.

Query something like this:

export default {
  async asyncData({ $prismic, error }) {
    try{
      // Query to get introduction page content
      const introductionContent = (await $prismic.api.getSingle('introduction')).data
      return {
        introductionContent
      }
    } catch (e) {
      // Returns error page
      error({ statusCode: 404, message: 'Page not found' })
    }
  },
}

Then you need to do templating in your page:-

    <template>
        {{ $prismic.asText( introductionContent.title) }}
     </template>

You can follow all this documentation:
https://prismic.nuxtjs.org/fetching-content.
https://prismic.io/docs/technologies/using-prismic-with-nuxtjs-vuejs

Let me know if you have any doubt.

Thanks,
Priyanka

#4

Hi Priyanka, thanks for your reply.

The above code works, and I guess it makes sense to query by the whole page rather than a single entity.

But the predicates search is not working for me. Based on the predicates query in https://prismic.io/docs/technologies/how-to-query-the-api-vuejs#the-basics I did

export default {
async asyncData({ $prismic, error }) {
  try{
    // Query to get introduction page content
    //const introductionContent = (await $prismic.api.getSingle('introduction')).data
    const introductionContent = await $prismic.client.query($prismic.predicates.year('document.last_publication_date', 2020)) // not the introduction but just a test
    return {
      introductionContent
    }
  } catch (e) {
    // Returns error page
    console.log(e)
    error({ statusCode: 404, message: 'Page not found' })
  }
},

but I got
Cannot read property 'query' of undefined

#5

You don’t need to specify client with the nuxt kit

const introductionContent = await $prismic.api.query($prismic.predicates.at('document.type', {API-ID of doc})

It describes this on the kit website

#6

Perfect! Thank you :slight_smile:

#7

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.