fix: account for incomplete drink entries in Contentful

app/routes/_app.$slug.tsx

@@ -14,7 +14,7 @@ import NavLink from '~/navigation/nav-link';
 import Glass from '~/drinks/glass';
 import DrinkSummary from '~/drinks/drink-summary';
 import DrinkDetails from '~/drinks/drink-details';
-import type { DrinksResponse, EnhancedDrink } from '~/types';
+import type { Drink, DrinksResponse, EnhancedDrink } from '~/types';
 
 export const loader = async ({ params, request }: LoaderArgs) => {
   if (!params.slug) throw json('Missing slug', 400);
@@ -65,17 +65,17 @@ export const loader = async ({ params, request }: LoaderArgs) => {
 
   const {
     data: {
-      drinkCollection: { drinks },
+      drinkCollection: { drinks: maybeDrinks },
     },
   } = queryResponseJson;
 
+  const drinks = maybeDrinks.filter((drink): drink is Drink => Boolean(drink));
+
   if (drinks.length === 0) {
     throw json({ message: 'Drink not found' }, 404);
   }
 
-  const drinksWithPlaceholderImages: Array<EnhancedDrink> =
-    await withPlaceholderImages(drinks);
-
+  const drinksWithPlaceholderImages = await withPlaceholderImages(drinks);
   const [enhancedDrink] = drinksWithPlaceholderImages;
 
   if (enhancedDrink.notes) {

app/routes/_app._index.tsx

@@ -6,7 +6,7 @@ import { cache } from '~/utils/cache.server';
 import { withPlaceholderImages } from '~/utils/placeholder-images.server';
 import Nav from '~/navigation/nav';
 import DrinkList from '~/drinks/drink-list';
-import type { DrinksResponse, EnhancedDrink } from '~/types';
+import type { Drink, DrinksResponse, EnhancedDrink } from '~/types';
 
 export type LoaderData = SerializeFrom<typeof loader>;
 
@@ -59,10 +59,11 @@ export const loader = async ({ request }: LoaderArgs) => {
 
   const {
     data: {
-      drinkCollection: { drinks },
+      drinkCollection: { drinks: maybeDrinks },
     },
   } = queryResponseJson;
 
+  const drinks = maybeDrinks.filter((drink): drink is Drink => Boolean(drink));
   const drinksWithPlaceholderImages = await withPlaceholderImages(drinks);
   const loaderData = { drinks: drinksWithPlaceholderImages };
 

app/routes/_app.search/route.tsx

@@ -82,10 +82,11 @@ export const loader = async ({ request }: LoaderArgs) => {
 
   const {
     data: {
-      drinkCollection: { drinks },
+      drinkCollection: { drinks: maybeDrinks },
     },
   } = queryResponseJson;
 
+  const drinks = maybeDrinks.filter((drink): drink is Drink => Boolean(drink));
   // sort results in the same order as slugs returned from Algolia
   drinks.sort((a, b) => slugs.indexOf(a.slug) - slugs.indexOf(b.slug));
 

app/routes/_app.tags.$tag.tsx

@@ -12,7 +12,7 @@ import Nav from '~/navigation/nav';
 import NavLink from '~/navigation/nav-link';
 import NavDivider from '~/navigation/nav-divider';
 import DrinkList from '~/drinks/drink-list';
-import type { DrinksResponse, EnhancedDrink } from '~/types';
+import type { Drink, DrinksResponse, EnhancedDrink } from '~/types';
 
 export const loader = async ({ params, request }: LoaderArgs) => {
   if (!params.tag) throw json('Missing tag', 400);
@@ -67,10 +67,12 @@ export const loader = async ({ params, request }: LoaderArgs) => {
 
   const {
     data: {
-      drinkCollection: { drinks },
+      drinkCollection: { drinks: maybeDrinks },
     },
   } = queryResponseJson;
 
+  const drinks = maybeDrinks.filter((drink): drink is Drink => Boolean(drink));
+
   if (drinks.length === 0) {
     throw json({ message: 'No drinks found' }, 404);
   }

app/routes/_app.tags._index.tsx

@@ -10,7 +10,7 @@ import { getEnvVars } from '~/utils/env.server';
 import { mergeMeta } from '~/utils/meta';
 import { fetchGraphQL } from '~/utils/graphql.server';
 import { cache } from '~/utils/cache.server';
-import type { DrinkTagsResponse } from '~/types';
+import type { Drink, DrinkTagsResponse } from '~/types';
 
 export type LoaderData = SerializeFrom<typeof loader>;
 
@@ -52,10 +52,11 @@ export const loader = async ({ request }: LoaderArgs) => {
 
   const {
     data: {
-      drinkCollection: { drinks },
+      drinkCollection: { drinks: maybeDrinks },
     },
   } = queryResponseJson;
 
+  const drinks = maybeDrinks.filter((drink): drink is Drink => Boolean(drink));
   const uniqueTags = drinks.reduce<Set<string>>((acc, drink) => {
     drink.tags?.forEach((tag) => acc.add(tag));
     return acc;

app/types.ts

@@ -15,7 +15,7 @@ export interface DrinksResponse {
   }>;
   data: {
     drinkCollection: {
-      drinks: Array<Drink>;
+      drinks: Array<Drink | null>;
     } | null;
   };
 }
@@ -28,20 +28,28 @@ export type DrinkTagsResponse = DrinksResponse & {
   };
 };
 
+// Most of the fields will be null if you start to create a new Drink in
+// Contentful without finishing it.
 export interface Drink {
-  title: string;
+  title: string | null;
   slug: string;
   image: {
     url: string;
-  };
-  ingredients: Array<string>;
-  calories: number;
+  } | null;
+  ingredients: Array<string> | null;
+  calories: number | null;
   notes?: string;
   tags?: Array<string>;
 }
 
-export interface EnhancedDrink extends Drink {
-  image: Drink['image'] & {
+export interface EnhancedDrink {
+  title: NonNullable<Drink['title']>;
+  slug: Drink['slug'];
+  image: NonNullable<Drink['image']> & {
     blurDataUrl: string;
   };
+  ingredients: NonNullable<Drink['ingredients']>;
+  calories: NonNullable<Drink['calories']>;
+  notes?: Drink['notes'];
+  tags?: Drink['tags'];
 }

app/utils/placeholder-images.server.ts

@@ -1,29 +1,43 @@
 import { makeImageUrl } from '~/core/image';
-import type { Drink } from '~/types';
+import type { Drink, EnhancedDrink } from '~/types';
 
-export async function withPlaceholderImages(drinks: Array<Drink>) {
-  return Promise.all(
-    drinks.map(async (drink) => {
-      const blurredImageUrl = makeImageUrl({
-        baseImageUrl: drink.image.url,
-        width: 10,
-        quality: 90,
-        format: 'webp',
-      });
-      const blurredImageResponse = await fetch(blurredImageUrl);
-      const blurredImageArrayBuffer = await blurredImageResponse.arrayBuffer();
-      const blurredImageBase64String = btoa(
-        String.fromCharCode(...new Uint8Array(blurredImageArrayBuffer)),
-      );
-      const blurDataUrl = `data:image/webp;base64,${blurredImageBase64String}`;
+export async function withPlaceholderImages(
+  drinks: Array<Drink>,
+): Promise<Array<EnhancedDrink>> {
+  return (
+    await Promise.all(
+      drinks.map(async (drink) => {
+        if (
+          drink.title === null ||
+          drink.ingredients === null ||
+          drink.calories === null ||
+          !drink.image?.url
+        ) {
+          return null;
+        }
 
-      return {
-        ...drink,
-        image: {
-          ...drink.image,
-          blurDataUrl,
-        },
-      };
-    }),
-  );
+        const blurredImageUrl = makeImageUrl({
+          baseImageUrl: drink.image.url,
+          width: 10,
+          quality: 90,
+          format: 'webp',
+        });
+        const blurredImageResponse = await fetch(blurredImageUrl);
+        const blurredImageArrayBuffer =
+          await blurredImageResponse.arrayBuffer();
+        const blurredImageBase64String = btoa(
+          String.fromCharCode(...new Uint8Array(blurredImageArrayBuffer)),
+        );
+        const blurDataUrl = `data:image/webp;base64,${blurredImageBase64String}`;
+
+        return {
+          ...drink,
+          image: {
+            ...drink.image,
+            blurDataUrl,
+          },
+        };
+      }),
+    )
+  ).filter((drink): drink is EnhancedDrink => drink !== null);
 }

app/utils/prime-content-cache.server.ts

@@ -40,7 +40,7 @@ export async function primeContentCache() {
       allDrinksDataFnArgs,
     );
     const allDrinksData: AllDrinksLoaderData = await allDrinksResponse.json();
-    const { drinks } = allDrinksData;
+    const drinks = allDrinksData.drinks.filter(Boolean);
 
     // 3. Load and cache each individual drink
     const allSlugs = drinks.map(({ slug }) => slug);