Wrap core photo queries in react cache

src/app/p/[photoId]/image/route.tsx

@@ -14,7 +14,7 @@ export async function GET(
   const [
     photo,
     { fontFamily, fonts },
-    // headers,
+    headers,
   ] = await Promise.all([
     getPhotoCached(context.params.photoId),
     getIBMPlexMonoMedium(),
@@ -27,6 +27,6 @@ export async function GET(
   
   return new ImageResponse(
     <PhotoImageResponse {...{ photo, width, height, fontFamily }} />,
-    { width, height, fonts },
+    { width, height, fonts, headers },
   );
 }

src/app/p/[photoId]/layout.tsx

@@ -12,12 +12,9 @@ import {
   absolutePathForPhotoImage,
 } from '@/site/paths';
 import PhotoDetailPage from '@/photo/PhotoDetailPage';
-import { getPhotosNearIdCached } from '@/photo/cache';
 import { getPhotoIds } from '@/services/vercel-postgres';
 import { STATICALLY_OPTIMIZED } from '@/site/config';
-import { cache } from 'react';
-
-const getPhotosNearIdCachedCached = cache(getPhotosNearIdCached);
+import { getPhotosNearIdCachedCached } from '@/photo/cache';
 
 export let generateStaticParams:
   (() => Promise<{ params: { photoId: string } }[]>) | undefined = undefined;
@@ -38,13 +35,11 @@ interface PhotoProps {
 export async function generateMetadata({
   params: { photoId },
 }:PhotoProps): Promise<Metadata> {
-  const photos = await getPhotosNearIdCachedCached(
+  const { photo } = await getPhotosNearIdCachedCached(
     photoId,
     GRID_THUMBNAILS_TO_SHOW_MAX + 2,
   );
 
-  const photo = photos.find(p => p.id === photoId);
-
   if (!photo) { return {}; }
 
   const title = titleForPhoto(photo);
@@ -74,13 +69,11 @@ export default async function PhotoPage({
   params: { photoId },
   children,
 }: PhotoProps & { children: React.ReactNode }) {
-  const photos = await getPhotosNearIdCachedCached(
+  const { photos, photo } = await getPhotosNearIdCachedCached(
     photoId,
     GRID_THUMBNAILS_TO_SHOW_MAX + 2,
   );
 
-  const photo = photos.find(p => p.id === photoId);
-
   if (!photo) { redirect(PATH_ROOT); }
   
   const isPhotoFirst = photos.findIndex(p => p.id === photoId) === 0;

src/app/p/[photoId]/share/page.tsx

@@ -1,4 +1,5 @@
-import { getPhotoCached } from '@/photo/cache';
+import { GRID_THUMBNAILS_TO_SHOW_MAX } from '@/photo';
+import { getPhotosNearIdCachedCached } from '@/photo/cache';
 import PhotoShareModal from '@/photo/PhotoShareModal';
 import { PATH_ROOT } from '@/site/paths';
 import { redirect } from 'next/navigation';
@@ -8,7 +9,12 @@ export default async function Share({
 }: {
   params: { photoId: string }
 }) {
-  const photo = await getPhotoCached(photoId);
+  const { photo } = await getPhotosNearIdCachedCached(
+    photoId,
+    // Matching common query from photo detail page
+    // in order to reuse cached results
+    GRID_THUMBNAILS_TO_SHOW_MAX + 2,
+  );
 
   if (!photo) { return redirect(PATH_ROOT); }
 

src/photo/cache.ts

@@ -32,6 +32,7 @@ import {
   PREFIX_TAG,
   pathForPhoto,
 } from '@/site/paths';
+import { cache } from 'react';
 
 // Table key
 const KEY_PHOTOS            = 'photos';
@@ -134,12 +135,16 @@ export const getPhotosCached = (
   [KEY_PHOTOS, ...getPhotosCacheKeys(...args)],
 )(...args).then(parseCachedPhotosDates);
 
-export const getPhotosNearIdCached = (
+const getPhotosNearIdCached = (
   ...args: Parameters<typeof getPhotosNearId>
 ) => unstable_cache(
   getPhotosNearId,
   [KEY_PHOTOS],
-)(...args).then(parseCachedPhotosDates);
+)(...args).then(({ photos, photo }) => ({
+  photos: parseCachedPhotosDates(photos),
+  photo: photo ? parseCachedPhotoDates(photo) : undefined,
+}));
+export const getPhotosNearIdCachedCached = cache(getPhotosNearIdCached);
 
 export const getPhotosDateRangeCached =
   unstable_cache(

src/services/vercel-postgres.ts

@@ -414,7 +414,13 @@ export const getPhotosNearId = async (
       [id, limit]
     );
   }, 'getPhotosNearId')
-    .then(({ rows }) => rows.map(parsePhotoFromDb));
+    .then(({ rows }) => {
+      const photos = rows.map(parsePhotoFromDb);
+      return {
+        photos,
+        photo: photos.find(photo => photo.id === id),
+      };
+    });
 };
 
 export const getPhotoIds = async ({ limit }: { limit?: number }) => {