diff --git a/src/app/p/[photoId]/image/route.tsx b/src/app/p/[photoId]/image/route.tsx index 21a62077..657016d7 100644 --- a/src/app/p/[photoId]/image/route.tsx +++ b/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( , - { width, height, fonts }, + { width, height, fonts, headers }, ); } diff --git a/src/app/p/[photoId]/layout.tsx b/src/app/p/[photoId]/layout.tsx index 6db74852..e014b224 100644 --- a/src/app/p/[photoId]/layout.tsx +++ b/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 { - 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; diff --git a/src/app/p/[photoId]/share/page.tsx b/src/app/p/[photoId]/share/page.tsx index 4b8e6c73..b150f8e8 100644 --- a/src/app/p/[photoId]/share/page.tsx +++ b/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); } diff --git a/src/photo/cache.ts b/src/photo/cache.ts index 7271c2c1..fc21fbd5 100644 --- a/src/photo/cache.ts +++ b/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 ) => 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( diff --git a/src/services/vercel-postgres.ts b/src/services/vercel-postgres.ts index eeabd78a..69f592e3 100644 --- a/src/services/vercel-postgres.ts +++ b/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 }) => {