The unstable cache (#9251)

* Remove fetch use unstable_cache * fix revalidate caching
getsentry · Feb 27, 2024 · e16d40c · e16d40c
1 parent df98140
commit e16d40c
Show file tree

Hide file tree

Showing 5 changed files with 53 additions and 87 deletions.
diff --git a/app/changelog/[slug]/api/route.ts b/app/changelog/[slug]/api/route.ts
diff --git a/app/changelog/[slug]/page.tsx b/app/changelog/[slug]/page.tsx
@@ -1,13 +1,17 @@
 import {Fragment, Suspense} from 'react';
 import {type Category, type Changelog} from '@prisma/client';
 import * as Sentry from '@sentry/nextjs';
+import {GET as sessionHandler} from 'app/changelog/api/auth/[...nextauth]/route';
 import type {Metadata, ResolvingMetadata} from 'next';
+import {unstable_cache} from 'next/cache';
 import Link from 'next/link';
 import {notFound} from 'next/navigation';
+import {getServerSession} from 'next-auth/next';
 import {MDXRemote} from 'next-mdx-remote/rsc';
 
 import Article from 'sentry-docs/components/changelog/article';
 import {mdxOptions} from 'sentry-docs/mdxOptions';
+import prisma from 'sentry-docs/prisma';
 
 type ChangelogWithCategories = Changelog & {
   categories: Category[];
@@ -39,15 +43,30 @@ export async function generateMetadata(
   };
 }
 
-const getChangelog = async slug => {
-  const result = await fetch(
-    `${process.env.BASE_URL || `https://${process.env.VERCEL_URL}` || 'https://localhost:3000'}/changelog/${slug}/api`
-  );
-  if (result.ok) {
-    return result.json();
-  }
-  return null;
-};
+const getChangelog = unstable_cache(
+  async slug => {
+    const session = await getServerSession(sessionHandler);
+    let published: boolean | undefined = undefined;
+    if (!session) {
+      published = true;
+    }
+    try {
+      return await prisma.changelog.findUnique({
+        where: {
+          slug,
+          published,
+        },
+        include: {
+          categories: true,
+        },
+      });
+    } catch (e) {
+      return null;
+    }
+  },
+  ['changelog-detail'],
+  {tags: ['changelog-detail']}
+);
 
 export default async function ChangelogEntry({params}) {
   const changelog: ChangelogWithCategories | null = await getChangelog(params.slug);

diff --git a/app/changelog/api/route.ts b/app/changelog/api/route.ts
diff --git a/app/changelog/page.tsx b/app/changelog/page.tsx
@@ -1,29 +1,32 @@
 import {Fragment} from 'react';
 import * as Sentry from '@sentry/nextjs';
-import {GET as changelogsEndpoint} from 'app/changelog/api/route';
 import type {Metadata} from 'next';
+import {unstable_cache} from 'next/cache';
 
 import List from 'sentry-docs/components/changelog/list';
+import prisma from 'sentry-docs/prisma';
 
 import Header from './header';
 
-const getChangelogs = async () => {
-  if (process.env.CI) {
-    // during CI, we invoke the API directly since the endpoint doesn't exist yet
-    return (await changelogsEndpoint()).json();
-  }
-  const result = await fetch(
-    `${process.env.BASE_URL || `https://${process.env.VERCEL_URL}` || 'https://localhost:3000'}/changelog/api`,
-    {
-      cache: 'force-cache',
-      next: {tags: ['changelogs']},
-    }
-  );
-  if (result.ok) {
-    return result.json();
-  }
-  return [];
-};
+export const dynamic = 'force-dynamic';
+
+const getChangelogs = unstable_cache(
+  async () => {
+    return await prisma.changelog.findMany({
+      include: {
+        categories: true,
+      },
+      where: {
+        published: true,
+      },
+      orderBy: {
+        publishedAt: 'desc',
+      },
+    });
+  },
+  ['changelogs'],
+  {tags: ['changelogs']}
+);
 
 export default async function ChangelogList() {
   const changelogs = await getChangelogs();

diff --git a/src/actions/changelog.ts b/src/actions/changelog.ts
@@ -25,8 +25,7 @@ export async function unpublishChangelog(formData: FormData) {
   }
 
   revalidateTag('changelogs');
-  revalidatePath('/changelog', 'page');
-  revalidatePath('/changelog/[slug]', 'page');
+  revalidateTag('changelog-detail');
   return revalidatePath(`/changelog/_admin`);
 }
 
@@ -48,8 +47,7 @@ export async function publishChangelog(formData: FormData) {
   }
 
   revalidateTag('changelogs');
-  revalidatePath('/changelog', 'page');
-  revalidatePath('/changelog/[slug]', 'page');
+  revalidateTag('changelog-detail');
   return revalidatePath(`/changelog/_admin`);
 }
 
@@ -82,9 +80,6 @@ export async function createChangelog(formData: FormData) {
 
   await prisma.changelog.create({data});
 
-  revalidateTag('changelogs');
-  revalidatePath('/changelog', 'page');
-  revalidatePath('/changelog/[slug]', 'page');
   return redirect(`/changelog/_admin`);
 }
 
@@ -123,8 +118,7 @@ export async function editChangelog(formData: FormData) {
   }
 
   revalidateTag('changelogs');
-  revalidatePath('/changelog', 'page');
-  revalidatePath('/changelog/[slug]', 'page');
+  revalidateTag('changelog-detail');
   return redirect(`/changelog/_admin`);
 }
 
@@ -144,7 +138,6 @@ export async function deleteChangelog(formData: FormData) {
   }
 
   revalidateTag('changelogs');
-  revalidatePath('/changelog', 'page');
-  revalidatePath('/changelog/[slug]', 'page');
+  revalidateTag('changelog-detail');
   return revalidatePath(`/changelog/_admin`);
 }