Cache global category queries

app/grid/page.tsx

@@ -4,10 +4,10 @@ import {
 } from '@/photo';
 import PhotosEmptyState from '@/photo/PhotosEmptyState';
 import { Metadata } from 'next/types';
-import { getDataForCategories } from '@/category/data';
 import { getPhotos, getPhotosMeta } from '@/photo/db/query';
 import { cache } from 'react';
 import PhotoGridPage from '@/photo/PhotoGridPage';
+import { getDataForCategoriesCached } from '@/category/cache';
 
 export const dynamic = 'force-static';
 
@@ -25,19 +25,14 @@ export default async function GridPage() {
   const [
     photos,
     photosCount,
-    cameras,
-    lenses,
-    tags,
-    recipes,
-    films,
-    focalLengths,
+    categories,
   ] = await Promise.all([
     getPhotosCached()
       .catch(() => []),
     getPhotosMeta()
       .then(({ count }) => count)
       .catch(() => 0),
-    ...getDataForCategories(),
+    getDataForCategoriesCached(),
   ]);
 
   return (
@@ -46,12 +41,7 @@ export default async function GridPage() {
         {...{
           photos,
           photosCount,
-          cameras,
-          lenses,
-          tags,
-          films,
-          recipes,
-          focalLengths,
+          ...categories,
         }}
       />
       : <PhotosEmptyState />

app/page.tsx

@@ -8,10 +8,10 @@ import { Metadata } from 'next/types';
 import { cache } from 'react';
 import { getPhotos, getPhotosMeta } from '@/photo/db/query';
 import { GRID_HOMEPAGE_ENABLED } from '@/app/config';
-import { getDataForCategories } from '@/category/data';
+import { NULL_CATEGORY_DATA } from '@/category/data';
 import PhotoFeedPage from '@/photo/PhotoFeedPage';
 import PhotoGridPage from '@/photo/PhotoGridPage';
-
+import { getDataForCategoriesCached } from '@/category/cache';
 export const dynamic = 'force-static';
 export const maxDuration = 60;
 
@@ -31,21 +31,16 @@ export default async function HomePage() {
   const [
     photos,
     photosCount,
-    cameras,
-    lenses,
-    tags,
-    recipes,
-    films,
-    focalLengths,
+    categories,
   ] = await Promise.all([
     getPhotosCached()
       .catch(() => []),
     getPhotosMeta()
       .then(({ count }) => count)
       .catch(() => 0),
-    ...(GRID_HOMEPAGE_ENABLED
-      ? getDataForCategories()
-      : [[], [], [], [], [], [], []]),
+    GRID_HOMEPAGE_ENABLED
+      ? getDataForCategoriesCached()
+      : NULL_CATEGORY_DATA,
   ]);
 
   return (
@@ -55,12 +50,7 @@ export default async function HomePage() {
           {...{
             photos,
             photosCount,
-            cameras,
-            lenses,
-            tags,
-            recipes,
-            films,
-            focalLengths,
+            ...categories,
           }}
         />
         : <PhotoFeedPage {...{ photos, photosCount }} />

src/app/config.ts

@@ -298,8 +298,8 @@ export const OG_TEXT_BOTTOM_ALIGNMENT =
 export const ADMIN_DEBUG_TOOLS_ENABLED = process.env.ADMIN_DEBUG_TOOLS === '1';
 export const ADMIN_DB_OPTIMIZE_ENABLED = process.env.ADMIN_DB_OPTIMIZE === '1';
 export const ADMIN_SQL_DEBUG_ENABLED =
-  process.env.ADMIN_SQL_DEBUG === '1' &&
-  !IS_BUILDING;
+  process.env.ADMIN_SQL_DEBUG === '1';
+  // && !IS_BUILDING;
 
 export const APP_CONFIGURATION = {
   // Storage

src/app/static.ts

@@ -5,6 +5,8 @@ import {
   IS_PRODUCTION,
   STATICALLY_OPTIMIZED_PHOTO_CATEGORIES,
   STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES,
+  STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES,
+  STATICALLY_OPTIMIZED_PHOTOS,
 } from '@/app/config';
 import { GENERATE_STATIC_PARAMS_LIMIT } from '@/photo/db';
 import { getPublicPhotoIds } from '@/photo/db/query';
@@ -19,8 +21,8 @@ const logStaticGenerationDetails = (count: number, content: string) => {
 
 export const staticallyGeneratePhotosIfConfigured = (type: StaticOutput) =>
   IS_PRODUCTION && (
-    (type === 'page' && STATICALLY_OPTIMIZED_PHOTO_CATEGORIES) ||
-    (type === 'image' && STATICALLY_OPTIMIZED_PHOTO_CATEGORY_OG_IMAGES)
+    (type === 'page' && STATICALLY_OPTIMIZED_PHOTOS) ||
+    (type === 'image' && STATICALLY_OPTIMIZED_PHOTO_OG_IMAGES)
   )
     ? async () => {
       const photos = await getPublicPhotoIds({

src/category/cache.ts

@@ -1,9 +1,13 @@
 import { unstable_cache } from 'next/cache';
-import { getCountsForCategories } from './data';
+import { getCountsForCategories, getDataForCategories } from './data';
 import { KEY_PHOTOS } from '@/photo/cache';
 
-export const getCountsForCategoriesCached = () =>
-  unstable_cache(
-    getCountsForCategories,
-    [KEY_PHOTOS],
-  )();
+export const getDataForCategoriesCached = unstable_cache(
+  getDataForCategories,
+  [KEY_PHOTOS],
+);
+
+export const getCountsForCategoriesCached = unstable_cache(
+  getCountsForCategories,
+  [KEY_PHOTOS],
+);

src/category/data.ts

@@ -19,48 +19,68 @@ import { sortTagsByCount } from '@/tag';
 import { sortCategoriesByCount } from '@/category';
 import { sortFocalLengths } from '@/focal';
 
-export const getDataForCategories = () => [
+type CategoryData = Awaited<ReturnType<typeof getDataForCategories>>;
+
+export const NULL_CATEGORY_DATA: CategoryData = {
+  cameras: [],
+  lenses: [],
+  tags: [],
+  recipes: [],
+  films: [],
+  focalLengths: [],
+};
+
+export const getDataForCategories = () => Promise.all([
   SHOW_CAMERAS
     ? getUniqueCameras()
       .then(sortCategoriesByCount)
       .catch(() => [])
-    : [],
+    : undefined,
   SHOW_LENSES
     ? getUniqueLenses()
       .then(sortCategoriesByCount)
       .catch(() => [])
-    : [],
+    : undefined,
   SHOW_TAGS
     ? getUniqueTags()
       .then(sortTagsByCount)
       .catch(() => [])
-    : [],
+    : undefined,
   SHOW_RECIPES
     ? getUniqueRecipes()
       .then(sortCategoriesByCount)
       .catch(() => [])
-    : [],
+    : undefined,
   SHOW_FILMS
     ? getUniqueFilms()
       .then(sortCategoriesByCount)
       .catch(() => [])
-    : [],
+    : undefined,
   SHOW_FOCAL_LENGTHS
     ? getUniqueFocalLengths()
       .then(sortFocalLengths)
       .catch(() => [])
-    : [],
-] as const;
+    : undefined,
+]).then(([
+  cameras = [],
+  lenses = [],
+  tags = [],
+  recipes = [],
+  films = [],
+  focalLengths = [],
+]) => ({
+  cameras, lenses, tags, recipes, films, focalLengths,
+}));
 
 export const getCountsForCategories = async () => {
-  const [
+  const {
     cameras,
     lenses,
     tags,
     recipes,
     films,
     focalLengths,
-  ] = await Promise.all(getDataForCategories());
+  } = await getDataForCategories();
 
   return {
     cameras: cameras.reduce((acc, camera) => {

src/cmdk/CommandK.tsx

@@ -2,31 +2,21 @@ import CommandKClient from './CommandKClient';
 import { getPhotosMetaCached } from '@/photo/cache';
 import { photoQuantityText } from '@/photo';
 import { ADMIN_DEBUG_TOOLS_ENABLED } from '../app/config';
-import { getDataForCategories } from '@/category/data';
+import { getDataForCategoriesCached } from '@/category/cache';
 
 export default async function CommandK() {
   const [
     count,
-    cameras,
-    lenses,
-    tags,
-    recipes,
-    films,
-    focalLengths,
+    categories,
   ] = await Promise.all([
     getPhotosMetaCached()
       .then(({ count }) => count)
       .catch(() => 0),
-    ...getDataForCategories(),
+    getDataForCategoriesCached(),
   ]);
 
   return <CommandKClient
-    cameras={cameras}
-    lenses={lenses}
-    tags={tags}
-    films={films}
-    recipes={recipes}
-    focalLengths={focalLengths}
+    {...categories}
     showDebugTools={ADMIN_DEBUG_TOOLS_ENABLED}
     footer={photoQuantityText(count, false)}
   />;