I changed the UID, but page with old UID is still active?

Hello everyone,

My client had a page https://www.hivery.com/david-buckley-retail-publix but he decided to change the UID to https://www.hivery.com/david-buckley-retail-kroger

He said that he doesn't wish the old pages to still be active - they should either 404 or redirect to the current UID.

I am using NextJS and my getStaticPaths() function looks like this:

export async function getStaticPaths() {

const documents = await queryRepeatableDocuments((doc) => doc.type === "page")
console.log(documents)
return {
paths: documents.map((doc) => /${doc.uid.split("__").join("/")}),
fallback: true,
}
}

It should also be noted that I use "fallback: true" in my getStaticPaths() which seems to affect this behaviour. But I think I still need this boolean to be true (I use it to generate landing pages from the root path, such as these urls above, I do it within [...uid].js)

Update: it does seem the the fallback option is what is causing the old page to be rendered. Can somebody explain how this is possible. Since I have updated the UID, how does my nextjs app knows that there has been a page with this UID and this content. (This is my first Nextjs website, apologies)

I was debugging what is going on in getStaticProps function and my that I search by is indeed david-buckley-retail-publix (the old UID), but then the pageDocument that I get after I search using .getByUID() has a UID of "david-buckley-retail-kroger" (the new UID page)

Any idea how I can fix this behaviour?

Many thanks,
Kris

Does this help?

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

Re-opened for you now @kris

1 Like

@marcellothearcane I am not sure if this will solve my problem.

My client creates a lot of unique landing pages which he duplicates previous pages and he changes the URL.

So for example, he has a page with URL "/linkedin-proposal", he sends it across, he makes the call/deal and then 5 days later, he wants to create a new page called "/microsoft-proposal" which is almost exactly the same as the linkedin proposal page, but with different copy.

The problem is that the old linkedin proposal page is still working, but this time is showing microsoft proposal copy, because it fallsback to the new copy.

Any advice of how I can tackle this?

@Phil could you help with this?

Hi @kris & @marcellothearcane.

This behavior is happening because the UID field stores all previous values and allows you to query the document with these, even after the value has been changed. The reason it was designed this way was so that old link using the old UID value would still work (you wouldn't end up with broken links everywhere when you change the UID value).

So what we recommend doing is adding a check that compares the UID used to the current UID value. If it's an old UID value, then you redirect to the page using the new value.

In your particular case, the reason the old UID value works is indeed because you have fallback set to true. What I've done in my Next.js websites is add a useEffect to check if the UID value is out-of-date. Here is a simple example page that does this:

import React, { useEffect } from 'react'
import { useRouter } from 'next/router'
import Prismic from 'prismic-javascript'
import Custom404 from '../404'
import linkResolver from '../../utils/linkResolver'

export default function Page({ document, uid }) {
  const router = useRouter()
  if (router.isFallback) {
    return <h1>Loading...</h1>
  }

  if (!document) {
    return <Custom404 />
  }

  useEffect(() => {
    if (document.uid !== uid) {
      const forwardUrl = linkResolver(document)
      router.replace(forwardUrl)
    }
  }, [document])

  return (
    <div>
      ...your page content
    </div> 
  )
}

export async function getStaticPaths() {
  // getStaticPaths code
}

export async function getStaticProps({ params }) {
  const document = await Prismic.client('https://your-repo-name.cdn.prismic.io/api/v2')
    .getByUID('page', params.uid)

  return {
    props: { document, uid: params.uid },
  }
}

Give that a try and let me know if it solves your issue for you :grinning:

3 Likes

This is exactly what I needed @levi - I changed a bit of the code to accommodate for client's needs and I got it working!

Thank you and the whole Prismic team to being awesome as always.

PS: I think an article in the docs regarding this will be extremely helpful for future folks who will struggle with this

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