Site Name: nervous-elion-083963
Framework: Gatsby
CMS: Dato
I have a bit of an odd situation going on with the Events page of my Gatsby site that I’m hoping someone might be able to provide some insight on. There’s a bit of nuance to this, so I’ll try to be as thorough as possible while hopefully keeping it brief as well.
For the Events portion of our website, when an Event is added to Dato a slug is generated automatically from the title (e.g. “Go Discover” becomes “go-discover”). In addition to that I take the start date of the Event—which is entered using Dato’s DateTime input—and generate a formatted string that is appended to the primary slug to help ensure there are no collisions with similarly named Events (e.g. if we have a “Go Discover” Event on July 1st and a “Go Discover” Event on August 1st, the full slugs generated would be “go-discover-2020-07-01” and “go-discover-2020-08-01” respectively).
This is all handled in my gatsby-node.js
file when using the createPage()
function (the following screenshot is of a few relevant portions of that file showing what is going on):
You can see from the screenshots above that I’m using GraphQL to bring in the Event and also its start date and using formatString()
to convert it to a timestamp. I then have a wrapper function for createPage()
called hccCreatePages()
, which you can see in the final screenshot. In that final screenshot, you can see that I’m using Moment.js to generate the YYYY-MM-DD
date slug, which is appended to the main slug. That complete slug is then passed in to create the page’s final destination.
This whole setup has worked great so far on our Events page. However, just recently we noticed that a select few Events on that page are not going to the proper destination. After looking into it, I realized that this date slug at the end is not always getting generated properly. For example, take the “Red Sea Rules Women’s Study” Event on July 16th, 2020 on our Events page. This Event should go to https://www.yourhillside.com/events/red-sea-rules-women-study-2020-07-16/
, but going to that destination directly from the listing on the page results in a 404. However, for some reason the page is instead getting generated with a date slug using the next day at https://www.yourhillside.com/events/red-sea-rules-women-study-2020-07-17/
:
Notice how the date portion of the slug for when the page got created is incorrect…although all other information on the page is correct. One odd thing about all of this is that it is NOT an issue on my local install. The date portion of the slug is generated correctly, and the proper destination page is working as it should:
Even stranger still, as I mentioned previously this is only happening for a select few events. The vast majority of events are getting generated with the correct YYYY-MM-DD
slug.
Is there some nuance with using Moment.js to generate these strings that I’m missing that could be causing the issue? Everything is working as it should on my local install, so I don’t know if there’s something I need to configure in Netlify or Gatsby that sets timezone information perhaps? Maybe that has something to do with these select few slugs being off.
Any help would be greatly appreciated to help point me in the right direction. Thanks!