Async fetch, single type

Developing with Prismic
1

Hello, I'm trying to fetch a single type from a component. But somehow the result comes back empty.. Am I missing something? See code example below.

<template>
  <div id="Fetch" class="Fetch col col-100">

    <div v-html="document">

    </div>

  </div>
</template>

<script>
export default {
  data: () => ({
      document: {},
  }),
  async fetch() {
    this.document = await this.$prismic.client.getSingle('homepage')
  },
}
</script>

<style lang="scss">
.Fetch {
  background: blue;
}
</style>
3

Hi @hi13 .

Thanks for posting this question :slight_smile: I think I see an issue.

Your document property is not HTML, it's the JSON response from the API. The document object will look something like this:

const document = {
  uid: "hello-world",
  // ... document metadata ...
  data: {
    // ... document data ...
    example_number: 5,
    example_rich_text: {...}
  }
}

So, to access example_number, you could do:

<div v-html="document.data.example_number">

And that should return:

<div>5</div>

However, the rich text field is also formatted as JSON, so you need to convert it to HTML. To do so, I recommend using the <prismic-rich-text /> component:

<prismic-rich-text :field="document.data.example_rich_text" />

If you want to use v-html, you can use one of the rich text methods in the Prismic-Vue plugin:

<div v-html="$prismic.asHtml(document.data.example_rich_text)" />

Let me know if that works for you, or if you have any other questions.

Sam

4

Hey Sam, thank you for the reply. The thing is that the whole object seems to return null.

Even if I do this I get nothing:

<template>
  <div id="Fetch" class="Fetch col col-100">

    <div>
      <prismic-rich-text :field="document.data.intro_text" />
    </div>

  </div>
</template>

<script>
export default {
  data: () => ({
    document: {},
  }),
  async fetch() {
    this.document = await this.$prismic.client.getSingle('homepage')
  },
}
</script>

<style lang="scss">
.Fetch {
  background: blue;
}
</style>

I have a custom type named Homepage (homepage) and a text field named intro_text.

I can grab the data from the page with async asyncData({ $prismic, error }) { and pass it on to the component as a prop, so I now that the custom type is correct.

But when trying async fetch from the component instead it gives me null....

5

The code example above gives me: Cannot read property 'intro_text' of undefined

6

Hi @hi13,

What happens if you initialize your document object like this:

  data: () => ({
    document: { data: { intro_text: null } },
  }),
7

It doesn't make any difference it seems. Still nothing. It's like the async fetch is not fetching anything.

8

Hey @hi13,

What happens if you put your fetch() inside a try/catch?

  async fetch() {
    try {
      this.document = await this.$prismic.client.getSingle('homepage')
    } catch {
      this.$nuxt.error({ statusCode: 404, message: "Data not found" });
    }
  },

Do you get an error?

Sam

Edit: I think you can get a specific error message like this:

    } catch(error) {
      this.$nuxt.error({ statusCode: 404, message: error });
    }
9

Yes, I then get Data not found.

10

But the custom type exists and the entries are live and published...

11

Can you share your project with me in a ZIP file or a GitHub repo? You can send it in a DM if you down't want to post it publicly.

12
13

Hey @hi13 ,

Thanks for sharing your project! I can see that Prismic isn't configured in nuxt.config.js. If you follow the steps here, that will likely get things working. Let me know if not.

Sam

14

This issue has been closed due to inactivity. Flag to reopen.