Next.js Conf 2024: Your app should be Live by Default – Watch Keynote

Prediabetes Guide

By Matthew Gibbons

Important information about prediabetes and how to improve it.

Sanity Studio showing simple article structure.

About the project

There are 15M people in the UK with a diagnosis of prediabetes. Primary Care services don't have enough time and resources to provide the information and support that these patients need. If left untreated, prediabetes will develop into type 2 diabetes and a number of other serious long-term conditions.

The Prediabetes Guide is a free to access collection of resources, articles, and videos produced by healthcare professionals. It provides the information that a doctor or nurse would want to tell a patient if they had the time.

We had the idea to produce a guide in March 2022, and having already used Sanity for other projects, it was a natural choice. Within a few hours we had an outline of the basic structure of the guide and were able to deploy a draft schema using Sanity Studio. The clinical team started to produce the content whilst the technical team built the API to fetch and assemble the content.

We chose GROQ for access the content because it provided the most flexibility. Two of the main benefits of GROQ are pipelining (the ability to process a result with a subsequent filter / projection) and projections (changing field values or creating new fields).

Pipelining allow us to build complex queries in simpler steps without having to execute multiple queries. We found this a more natural way to drill down to the content we needed.

Projections were really useful when we were adding options for content linking and SEO. For example, when linking to a page it sometimes makes sense to use a different title to the actual page title. We added a linkTitle field, and if set, this was used. However, rather than checking for the presence of the linkTitle in the front end, we used the coalesce function to ensure that the linkTitle had its own value or that of the article's title. This meant that we could fetch complete and relevant data for the frontend.

The project was built using SvelteKit with Svelte Portable Text and Tailwind Typography making the rendering straightforward.

Contributor