GraphQL, search engines and more: Our top posts in 2021
As 2021 draws to a close, we’d like to take this opportunity to look back on the Contentful blog and the enormous amount of articles that have been published.
Around 158 blog posts have gone live, covering a range of topics in development, strategy, community and product announcements. And these aren’t basic blogs offering a superficial take on their subjects. They’re written by a multitude of smart, talented people who are happy to offer insights and value to those folks who are looking for them. That’s truly remarkable.
We don’t have room to feature every single one of those posts here, unfortunately. But what we can do is highlight the ten most popular articles based on unique visits to the site. As you read through them, you may notice a distinct lean toward topics for developers. But I won’t spoil anything until you get to the end of this post!
My personal picks from the year, since you asked, are Six podcasts for people who work in tech (but aren’t developers) and Why structured content matters, or a brief history of the Australian railway. But there's also a wealth of posts about strategy, partners and product and I invite you to browse through and find your own favorites.
Our 10 most popular blog posts in 2021
1. GraphQL via HTTP in five ways: cURL, Python, JavaScript, Ruby and PHP
Python developer Shy Ruparel (who can always be relied upon to wish you good morning and good night on Twitter) has spent a lot of time building things with the Contentful GraphQL API.
As he explains in this post, originally published in January, he’d only dabbled with GraphQL in the past. But once it became a standard feature of the Contentful free tier, he was motivated to create some cool new projects. And along the way, he realized that he’d held a few misconceptions about how GraphQL actually worked.
“I’d incorrectly assumed that I needed to install a client library to be able to get data,” he said. “Because the state of GraphQL client libraries is a little rough once you leave the JavaScript ecosystem, I thought that using GraphQL wouldn’t be that practical in other languages. With time — and teammates that gently pointed out my mistakes — I realized that all I needed to make a GraphQL query was an HTTP request.”
To demonstrate how easy it is to use GraphQL, this guide takes us through the process of querying data in five different languages: cURL, Python, JavaScript, Ruby and PHP.
2. How to use GraphQL variables to give queries type safety
Continuing with the topic of GraphQL, developer evangelist Salma Alam-Naylor gave readers a tutorial about how to keep your GraphQL queries safe from disruption by unauthorized third parties.
It’s worth mentioning that because the Contentful GraphQL API is read-only, this kind of scenario will never happen, but security is always good to consider.
“One of the things I love about GraphQL is how straightforward it is to get up and running with little to no experience,” she wrote in October. “Using a browser-based GraphiQL interface — such as the GraphiQL explorer provided by Contentful — you can inspect your schema right there in the browser, and construct your queries in no time.”
GraphQL variables offer an extra layer of protection in your queries, namely type safety — meaning that a query will only accept dynamic variables of certain data types, such as String, Int (number), DateTime and so on. And what’s more, only a little work is needed to make your GraphQL queries safer.
Following the steps in this post, you’ll ensure that no one can play around with your data in real time by inserting an incorrect data type, a GraphQL mutation or similar.
3. Exploring linked entries and assets in Contentful with JavaScript via REST and GraphQL
Understanding the structure of the data responses from Contentful and how linked assets are returned and then resolved via the Contentful SDKs is important. It empowers you to choose which APIs and methods are best suited to your applications. With this post, written by Salma and first published in April, readers are shown the tools to resolve the linked assets and entries by themselves.
“The most frequently asked questions in DevRel (Developer Relations) when I started with Contentful were about how to display links or linked entries and assets inside the Contentful Rich Text field on the front end,” she said. “So, I set out to explore and investigate the inner workings of the Contentful REST API and GraphQL API in terms of linking assets and entries on a content type in order to understand how we can render links inside Contentful Rich Text fields.”
Readers are given practical examples of the main differences between the REST API and GraphQL API. There are also links to further resources on how to render linked assets and entries returned as part of the Contentful Rich Text field response using REST or GraphQL in JavaScript. Got all that? Good!
4. Paginating your Contentful blog posts in Next.js with the GraphQL API
Are you beginning to see a theme in our most popular posts this year? Yes, that’s right, there’s been a tremendous level of interest from the developer community about getting the most from the GraphQL API. In this tutorial published in April, also written by Salma, readers are shown how to build statically generated article list pagination using data from Contentful in a fresh Next.js application.
What is Next.js? It’s a powerful framework that offers Static Site Generation (SSG) for React applications. Static Site Generation is where your website pages are pre-rendered as static files using data fetched at build time (on the server), rather than running JavaScript to build the page in the browser (on the client) or on the server at the time someone visits your website (run time).
One benefit of this approach is that entire pages are loaded at first request rather than having to wait for client-side requests to fetch the data required. Another is accessibility —pages load without JavaScript — and the fact that it’s scalable, fast and secure. And then there’s the convenience of hosting the files on your static server of choice, whether it’s Netlify, Vercel or even GitHub. Read the post here.
5. How to build a lightweight microblogging site with Contentful, vanilla HTML, CSS and JavaScript
Have you given someone a lesson in KISSing today? No, wait, there’s been a misunderstanding. We’re talking about the KISS principle, an acronym for the phrase “Keep It Simple, Stupid.” In this post from February, Salma makes a strong case for keeping things uncomplicated when learning to work with new technology.
To that end, this popular tutorial is all about building your first-ever app using Contentful — without getting distracted by other front-end frameworks and technologies. Taking things one step at a time, you can follow along as Salma creates a simple static site using vanilla HTML, CSS and JavaScript. There are no packages to install, no build commands to run and no framework patterns to follow.
You’ll need to sign up for a free Contentful account to get started. Follow along and you’ll soon have a lightweight microblogging site live, and you’ll be learning a great deal about content types and content delivery APIs into the bargain.
6. Rich Text field tips and tricks from the Contentful DevRel team
Rich Text is a field type that enables authors to create rich text content, similar to traditional "What You See Is What You Get" (WYSIWYG) editors. The key difference with Contentful is that the Rich Text field response is returned as pure JSON rather than HTML. It offers common text formatting options such as paragraphs, lists and blockquotes, and allows entries and assets within our Contentful space to be linked dynamically and embedded within the flow of the text.
“The flexibility of the Rich Text field makes it my favorite feature in Contentful,” Salma explained in this post from May. “Developers in our community are adopting the power of the Rich Text field, because it offers exciting versatility for displaying content in your front-end applications. As a result, the DevRel team often receives questions about how to get the most out of this field type.”
This post offers advice on how to level up your Rich Text field game with a stellar list of top tips from the Contentful DevRel team.
7. How to filter entries by linked references in GraphQL
“Let’s say you’re making great progress on building your new blog site,” Salma wrote back in June. “You’re using Contentful’s GraphQL API and it’s a good time. You’ve written some great blog posts — and now you want a way to categorize them in your front-end application. For example, you want to show posts tagged with ‘JavaScript’ on a single URL.”
If you’ve ever wanted to filter a collection by a linked entry value using the GraphQL API, then this is the post for you. Salma shows you how to filter your blog posts by linked topics such as “javascript” or “tutorial” in this quick guide, where you pull the data you need using the linkedFrom field in your query.
8. How to generate an RSS feed for your blog with JavaScript and Netlify functions
Continuing the tutorial on building a lightweight microblog, this post from March explains how to add an RSS feed to your new site. Short for Really Simple Syndication, an RSS feed allows people to subscribe to newly published content on a site via an RSS reader, so they don’t need to manually sift through hundreds of websites or channels to get the latest updates.
An RSS feed takes the form of a standard XML (Extensible Markup Language) file, built of content and tags that define the content, and it looks a bit like HTML. XML is both human and machine readable. Its goal is to emphasize simplicity and usability across the World Wide Web.
Salma set out to learn how to generate an RSS feed for her microblog without using any front-end frameworks. And she documented the entire process so you can do the same. “Do I think RSS is worth it? Most definitely,” she wrote. “If I can enable more people to access my content in whatever way they choose, then RSS is a winner.”
9. How to add Algolia InstantSearch to your Next.js application
“By the time I had written 15 blog articles on my website, it was getting a little tricky to find what I was looking for in a hurry! So I set out to implement search functionality on my blog.”
In this post from July, Salma researched a way to add search functionality to her blog using Algolia. Algolia is a flexible hosted search and discovery API that comes with a generous free community plan. It provides up to 10,000 search requests per month, pre-built UI libraries (which are used in this tutorial), natural language processing and many other features.
Step-by-step, she shows us how to set up Algolia to receive data to power search results on a web application, create a custom script to transform and send the data to Algolia, and build out the search user interface (UI) in a Next.js application using the Algolia React InstantSearch UI.
While this tutorial is done with a site that’s powered by Contentful, the concepts apply to any data store or headless CMS out there — even if you store your blog content as markdown with your code. All you need is a Next.js application and some content.
10. How to build a project using Vue.js and Contentful
Rounding out our list of the most popular posts on our blog this year, developer evangelist Brittany Walker explains how to build a project using Vue.js and Contentful.
Vue.js is an open-source, progressive front-end JavaScript framework commonly used to build single-page applications and user interfaces for the web. It’s known to have a shallow learning curve with a welcoming and supportive community. You can get up and running with Vue.js even more quickly if you already understand how to work with HTML, CSS and JavaScript.
And Brittany’s demo project was a personal one that’s very dear to her heart. “As someone who has seen dozens of musicals and plays over the years, I needed a way to keep track of them,” she wrote. “I created TheaterLog — my first Vue project — to do just that. In this article, I add Contentful to an existing Vue project called TheaterLog.”
Wrapping up
And there you have it. The ten most popular posts published on the Contentful blog in 2021. We hope that you’ve enjoyed reading these and the rest of our content over the past 12 months, or liked a post so much that you wanted to share it with someone else.
If there’s a pattern, there’s clearly a lot of people seeking to learn more about GraphQL, but also about the fundamentals of self-publishing — whether it’s to build a lightweight blog, quickly add some search functionality or set up an RSS feed.
When I’m reading through these posts, however, what really shines through is the passion and enthusiasm of the Contentful Developer Evangelists past and present. A big thank you to Shy Ruparel, Salma Alam-Naylor and Brittany Walker for their contributions this past year. And naturally, my gratitude extends to everyone else who has written for the blog, whether they’re developers or partners or strategists, or anything in between.
Here’s looking forward to another productive year of learning, development and digital building with Contentful in 2022. Onwards!
