Conditional Slug Field

Pages
1

I’m currently working on moving an existing Pages experience to the new React supported Pages. I am trying to match the old experience as closely as possible. I am streaming a template where the slug field on a location entity is:

[[countryCode]]/[[address.region]]/[[address.city]]/[[address.line1]]

This works for the most part and matches the current paths in the old experience. However, some locations have the same address line 1. In the old experience, whenever the locations have the same slug, a number gets appended onto the end of the path. From what I can tell, this number is not the entity id, or phone, or any other field in the entity.

us/state/city/address-line-1-8517878
us/state/city/address-line-1-8517868

In GetPath, I’ve tried to remedy this by appending the entity id with no success. Current code below:

export const getPath: GetPath<TemplateProps> = ({ document }) => {
  return (document.slug
    ? `${document.slug}-${document.id.toString()}`
    : `${document.locale}/${document.address.region}/${document.address.city}/${
        document.address.line1
      }-${document.id.toString()}`);
};

Would it be best to change the slug field to include entity id at the end or is there a way to conditionally render the path in the stream?

2

It depends on what you’re looking to do. It’s recommended that the slug field represents the true slug you want to use and then getPath just returns document.slug. If getPath returns something else then local development will not work properly to get the document data dynamically. However, you can change it if you’d like. If you don’t want the appended entityId in the slug then getPath can return ${document.slug}-${document.id.toString()}. The current logic you have doesn’t really make sense with how the ternaries are working.

Do note that there’s no way to determine path conflicts within getPath in order to append the entityId on collision. It’d be all or nothing.

3

To match the previous experience, I don’t want the entity id appended to the path. However, if this is the only solution then I will change the slug value to have the entity id.

I was trying to get it to work in my localhost by appending the entity id to the path, but its not appending either way because of how you explained the local environment. The ternary is one I found here that I just edited to do this. Paths and Slugs | Hitchhikers

Its currently returning a 404 because two entities share the same slug. So best course of action then be to change the slug field to include entity id at the end?

4

Actually, your getPath example you wrote does work. I misread it.

But to the point of wanting to append an id (whether entityId or some incrementing value) upon collisions, there’s no way to do that conditionally as I mentioned. I assume the url was defined in the old site’s template and this was possible to determine conflicts, but unfortunately isn’t in the new system due to its architecture - there were tradeoffs for performance.

When you mentioned a 404, is that in local dev? That’s expected when you have a getPath of just ${document.slug} due to it not being able to find a unique one.

So best course of action then be to change the slug field to include entity id at the end?

Yes, if you want to have local dev continue to work in dynamic mode. An alternative option is to run the dev server with the local flag - npm run dev -- --local. This will not try to find a document for the entity dynamically, but will mean you can only see pages for the ~10 localData/ documents that exist.

1 Like