Article content not updating on route change

Developing with Prismic
, ,
1

Hey y'all!

I’m currently developing this blog site using Prismic and Nuxt 3 and have encountered an issue where the blog article content doesn’t update correctly when navigating between articles (see next/prev links at bottom of this page). It works fine in my local dev environment, but you already knew that. :face_with_spiral_eyes:

Ok, here's a whole lotta context:

  • Repository: here's a link to my repo over on GitHub.

  • Tech Stack: Prismic CMS, Nuxt 3, GSAP (for animations); deployed via Netlify with npx nuxi generate build command.

  • Issue: When I click the “Next” or “Previous” links to navigate between articles, the URL updates correctly, but the page content doesn’t change. The new article data is not being fetched/displayed until I manually refresh the page.

  • Observations:

    • I’ve added a :key="router.currentRoute.value.fullPath" to the layout and article template to force a re-render on route change. This made the URL update correctly, and it triggered re-renders, but the content still doesn’t update without a refresh.

    • The NewsletterSignup component (a popup which appears based on a cookie) shows up each time I navigate between articles. This seems to suggest that the route is updating, but article data is not being properly re-fetched/rendered.

Steps I’ve Taken So Far:

  1. Refetching Data on Route Change:
  • I’m using useAsyncData to fetch the article data with a watch option on route.params.uid to trigger re-fetching of article content.
  • I’ve also implemented a manual refresh using watch to trigger refreshArticle and refreshAllArticles functions when the route changes.
watch(() => route.params.uid, async () => {
  await refreshArticle()
  await refreshAllArticles()
})

However, this approach hasn’t resolved the issue, and the article content is still not refreshing when the route changes.

  1. Key Prop for Forcing Re-render:
  • I’ve added :key="router.currentRoute.value.fullPath" to the layout and article page templates to ensure the component re-renders on route change. This did force re-rendering, but the new article data is not loading correctly.
  1. Attempted ScrollSmoother/GSAP Debugging:
  • Initially, I suspected that GSAP’s ScrollSmoother might be causing conflicts with the route change behavior. However, after temporarily removing all GSAP plugins, the issue persisted. So, I’ve since added GSAP back in.

Here’s an Overview of My Setup:

  1. Layout (/layouts/default.vue):
  • I’m using gsap with ScrollSmoother to handle smooth scrolling. The key for the layout is set as :key="router.currentRoute.value.fullPath".
  1. Article Page Template (/pages/articles/[uid].vue):
const { data: article, refresh: refreshArticle } = useAsyncData('article', () => 
  prismic.client.getByUID<BlogArticleDocument>('blog_article', route.params.uid as string), 
  { watch: [() => route.params.uid] }
)
  • I also fetch all articles to calculate the previous/next articles using:
const { data: allArticles, refresh: refreshAllArticles } = useAsyncData('allArticles', () =>
  prismic.client.getAllByType<BlogArticleDocument>('blog_article', {
    orderings: { field: 'my.blog_article.publication_date', direction: 'asc' },
    fetch: ['blog_article.title', 'blog_article.featured_image'],
  }),
  { watch: [() => route.params.uid] }
)
  • The watch block is used to manually refresh the article and all articles when the route changes.

Despite all these efforts, the article content still doesn’t update on navigation without a page refresh.

Questions:

  • Is there a better way to ensure Prismic data is refetched properly on route changes in Nuxt 3?
  • Should I be handling route changes differently to force the content to update?
  • Could this issue be related to how I’ve implemented useAsyncData or how the component re-renders?
  • Are the watch block and :key attributes overkill?

Any insights or suggestions would be greatly appreciated!

Many thanks! :slightly_smiling_face:

5

Hey @epedersen, thank you so much for providing so many details about your issue, this helps a ton!

I believe you have an issue with your use of useAsyncData(). When using this composable the fetch result gets cached based on the key provided through the first argument.

On the ~/pages/article/[uid].vue page, you fetch the article's data keying the call under a static string, "article". This means that all your article will use the same cached data which is not what you want in this case. I believe updating your call to the following would help:

const { data: article, refresh: refreshArticle } = useAsyncData(`
  articles/${route.params.uid}`,
  () =>
    prismic.client.getByUID<BlogArticleDocument>(
      'blog_article', route.params.uid as string
    ), 
)

You can learn more about that:

Let us know if that helps!

Lucie

1 Like
6

Lucie, thank you so much! This resolved the issue and my next/prev article navigation is working perfectly now.


Many thanks for your time!
Erik

1 Like