Improve swr key handling

src/app/grid/page.tsx

@@ -38,6 +38,7 @@ export default async function GridPage() {
           <PhotoGrid {...{ photos, photoPriority: true }} />
           {photos.length >= INFINITE_SCROLL_MULTIPLE_GRID &&
             <InfinitePhotoScroll
+              swrKey={photos[0].id}
               type='grid'
               initialOffset={INFINITE_SCROLL_MULTIPLE_GRID}
               itemsPerPage={INFINITE_SCROLL_MULTIPLE_GRID}

src/app/page.tsx

@@ -33,6 +33,8 @@ export default async function HomePage() {
         <PhotosLarge {...{ photos }} />
         {photos.length >= INFINITE_SCROLL_MULTIPLE_HOME &&
           <InfinitePhotoScroll
+            swrKey={photos[0].id}
+            type="full-frame"
             initialOffset={INFINITE_SCROLL_MULTIPLE_HOME}
             itemsPerPage={INFINITE_SCROLL_MULTIPLE_HOME}
           />}

src/photo/InfinitePhotoScroll.tsx

@@ -17,12 +17,14 @@ export type RevalidatePhoto = (
 ) => Promise<any>;
 
 export default function InfinitePhotoScroll({
+  swrKey,
   type = 'full-frame',
   initialOffset = 0,
   itemsPerPage = 12,
   prefetch = true,
   triggerOnView = true,
 }: {
+  swrKey: string
   type?: 'full-frame' | 'grid'
   initialOffset?: number
   itemsPerPage?: number
@@ -30,7 +32,7 @@ export default function InfinitePhotoScroll({
   triggerOnView?: boolean
   debug?: boolean
 }) {
-  const key = type;
+  const key = `${swrKey}-${type}`;
 
   const buttonContainerRef = useRef<HTMLDivElement>(null);