Live update - api object being cached?

Developing with Prismic
1

I am trying to implement a page that will periodically check prismic for new content and render it 'live' on the page.

async fetch() {
        console.log("checking");
        try {
          let prismicResponse = await this.$prismic.api.query(
            this.$prismic.predicates.at('document.type', 'live_post'),
            {lang: 'en-gb'}
          )
          const content = prismicResponse.results
          const posts = content.map(c => {
            return {
              id: c.id,
              type: c.data.post_type,
              html: this.$prismic.asHtml(c.data.main_content)
            }
          })
          this.posts = posts
          setTimeout(this.$fetch, 2000)
        } catch (e) {
          console.log(e)
        }
    },

But when I add new content in Prismic the api response is still the same, and doesn't include the new content. If I refresh the page the new content appears as expected. Having read the FAQs, it seems to be issue 2, but I'm not sure how to go about rebuilding/refreshing the api object.

2

I was able to get around the issue by changing the prismicResponse to be an axios call rather than using the $prismic object, but still it would be useful to know how I could reload the api object.

1 Like
3

Hey @cjastles, thanks for sharing your use case. Have you tried setting up Webhooks? They can help you trigger a build when a change is detected:

4

Hi Pau, thanks for your reply. I'd already planned to move over to Webhooks as a more efficient way of handling updates, but still I think there are use cases which would involve being able to retrieve a fresh instance of the api object without needing to reload the page.