For this task I was ready to handle blog pages on my website.
Choosing the Data Source Design
I started with a simple markdown solution for writing blog content that was implemented as markdown files in a defined folder in my GitHub repo. That worked well enough, but I didn’t feel like I would learn much from that approach so I decide to go the route of connecting an external data source plugin into Gatsby. Enter Contentful CMS—it seemed like the perfect choice. Even if it felt a bit overkill for my needs, I would get to explore a headless cms and see what challenges I hit with an external data source.
Getting to Know Contentful
Setting up Contentful was a breeze. All it took was creating an account, setting up a space, and getting an access token to begin. No need to dive into lengthy docs—I simply asked ChatGPT to give me the starting code to integrate Contentful with my site. The screenshot below show my prompt and ChatGPT's accurate response that got me going to configure the site.
From there ChatGPT provided code to use graphQL and basic javascript to render a sample content set. Those stubs were all accurate and helped me just drop in my fields once I was ready for my actual content structure. Here is the screenshot of that part of ChatGPT’s response.
Modeling Contentful Data: Keeping It Simple but not too simple
Contentful has a Content Model that you have to set up to design your data structure. While there are fancy starters available online, I opted for a very basic "Page" type with essential fields like title, headline, slug, postDate, and a rich text body field. That's all I needed to create the blog card on the home page and show the content when a page was opened. The Content Model provides for data editing support that helps you ensure data consistency and format. I wonder about scale as I put this together for how it all works with millions of blog posts. I know the render of my website would need pagination and search but not sure what else on the contentful side needs to be considered. I’m not worried about that know as I’m not trying to solve for that level of content. #refactorlater.
Query Building with GraphQL and GraphiQL
Gatsby relies on GraphQL as the primary data layer to fetch and store data from any source. I'm a GraphQL novice, I found my way around the basics with relative ease. Knowing the data is the initial hardest part because Gatsby provides GraphiQL web interface to help you build the query language structure.
GraphiQL is a helpful sidekick—a fantastic web interface that visualizes the GraphQL dataset and helps us work out the perfect GraphQL query for our page or component.
Rendering the Data
All the basics pretty much just work to render the content. I used theme-ui render components so it’s really easy to read and also style from those base component types. Here is the extent of the code, minus the rich text render function implementation:
Now, the render rich text is where things got a bit trickier for my current knowledge level. Rendering the rich text field and supporting media assets like images and videos required some TypeScript magic. ChatGPT and GitHub Copilot offered limited assistance here, so I had to explore code online to get me started writing the handler function for rendering rich text. It was a bit of a puzzle, but I managed to piece it together. I suspect I still have bugs as I broke one of my “management philosophies’ to test all major paths/options before calling it done. Nobody tell my manager.
The Learning Curve
Overall, it took me about 4 hours across two days to get everything hooked up and my data set up just right. Of course, when it comes to learning new things, the journey is never linear. I spent around 8 hours in reality due to the learning curve—understanding how the Contentful Gatsby plugin handled data in GraphQL, setting up my data structure, and figuring out the path to render rich text. There's still more to explore, but I'm excited to see my blog entries come to life!
Blog post written by Chad with the assistance of ChatGPT.