nuxt-modules / prismic

Easily connect your Nuxt.js application to your content hosted on Prismic

Home Page:https://prismic.nuxtjs.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Prismic client returns cached data if toolbar is disabled

zrisher opened this issue · comments

Issue Description

The client returned from usePrismic() can provide stale data if the nuxt config contains toolbar: false.

Versions

  • nuxt: v3.5.3
  • @nuxtjs/prismic: v3.0.0
  • node: v16.19.0

Steps to reproduce

  • Clone minimal reproduction repo - https://github.com/q3devteam/prismic-client-error
  • Create/find a prismic repo with at least one document with a text field you can edit
  • Update the endpoint to your prismic repo here and here
  • Update the document query to match your document here and here
  • Install & run dev
  • Update the text field in the document

What is Expected?

The document will appear the same from both queries.

What is actually happening?

The query that uses the client from usePrismic shows old data, whereas the client pulled directly from @prismicio/client returns the current state of the document.

Notes

If you alter the prismic config object in nuxt.config.js it will invalidate the cached data and return the newest data for both queries (they will match once, then diverge after the next document update).

If you remove toolbar: false from the prismic config, they will converge after each subsequent document update.

commented

Interesting one, thank you for contributing and suggesting a reproduction! I will investigate this week.

commented

OK, thanks for the reproduction! I managed to figure out what this was. We're fixing that in an upstream package: prismicio/prismic-client#310

In the meantime, rest assured, this only happens to Prismic developers because of some Prismic cookies misusage, not visitors of the website.

@lihbr Thanks so much for taking a deep dive and fixing this issue!

commented

Hey @zrisher, after investigation we gain better knowledge about the issue and decided to label it as "wontfix"

This is an edge case that affects only Prismic users under this scenario:

  1. A developer started developing a website with the toolbar on, it set a tracker
  2. At some point, the developer decided to remove the toolbar from their site, this made the tracker stale
  3. Because the tracker became stale, content fetched on their session would also remain stale

You can get out of this "corrupted" state. To do so, simply delete your io.prismic.preview cookie in your browser. Content should then be fetched fresh again.

Let us know if this does the trick for you, thank you again for your contribution!

@lihbr I'm not sure you can really consider this an "edge" case, because the toolbar is enabled by default. Consider the following example, which I would wager occurs for over half of all developers installing this for the first time:

  • Install @nuxtjs/prismic and add basic config, following the quickstart.
  • Dev for a while
  • See the toolbar pop up at the bottom for the nth time and decide to finally disable it
  • Dev for a while until you realize you're getting stale data from prismic
  • Waste a good amount of time investigating until you find this issue

Surely there's a better way? Perhaps @nuxtjs/prismic could check for and delete this cookie itself, if preview: false?

commented

Hey @zrisher, thanks for insisting, you're right.

Despite us not wanting the toolbar to be disabled because it kills previews for content editor, I can understand it becoming possibly annoying while developing.

I'll check if the Nuxt module can do something about it!

Thanks so much @lihbr!

commented

Should be fixed in 3.0.1, cookie will be cleaned up if toolbar is disabled by the module ☺️

https://github.com/nuxt-modules/prismic/blob/master/CHANGELOG.md#301-2023-06-21

Thanks again!