fix: breadcrumb cache issue (#2215)

* fix:breadcrum-cache-issue * chore:rename-revalidateMytag * refactor: move-revalidateTag * refactor: extract tags into reusable utility * feat: add template * Update 3_follow_the_unkey_x_account.md (#2323) * fix: capture uniqueness error and return it correctly (#2337) * docs: getVerifications instead of get (#2329) * Update 3_follow_the_unkey_x_account.md (#2324) Followed unkey on Twitter Co-authored-by: Andreas Thomas <[email protected]> * fix: transaction ...: in use: for query (#2278) * fix: transaction ...: in use: for query - Fixes #2197 - The error is caused by the cache revalidation happening in the background, so we have a racecondition with the other queries we are running in the insertGenericAuditLogs function * docs: explain for future self * fix: another racecondition also bulk insert auditLogs and auditLogTargets * [autofix.ci] apply automated fixes --------- Co-authored-by: chronark <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> * fix: handle undefined ratelimits * Update 3_follow_the_unkey_x_account.md (#2338) * fix: handle case when blogs array is empty * [oss.gg] side quest : added another framework; hono on cloudflare workers. (#2345) * fix: weird spacing in changelog by removing the extra gap (#2340) * fix: weird spacing in changelog * feat: formatted * oss.gg: create a template for ratelimiting a oak server in deno with unkey (#2308) Co-authored-by: Andreas Thomas <[email protected]> * follow unkey on X #2252 (#2315) Co-authored-by: Your Name <[email protected]> * Follow the Unkey X account: @unkeydev Complete! (#2332) * Update 3_follow_the_unkey_x_account.md * Update 3_follow_the_unkey_x_account.md --------- Co-authored-by: Andreas Thomas <[email protected]> * fix(www): analytics bento code snippet is not readable (#2311) - add hover effect to analytics bento removing gradient background - make copy code button sticky to top-right corner - impl independent vertical scrolls for language switcher and code editor * Update 7_create_a_template.md * Update 7_create_a_template.md * chore(deps-dev): bump @content-collections/core from 0.6.2 to 0.7.2 (#2255) Bumps @content-collections/core from 0.6.2 to 0.7.2. --- updated-dependencies: - dependency-name: "@content-collections/core" dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * fix: order audit logs by time, show latest on top (#2295) * feat: add template * feat: Unkey FastAPI boilerplate (#2307) * feat: add template * feat: follow unkey on X (#2357) * Update 6_record_onboarding.md (#2301) * fix: reset input fields in API delete dialog after reopening (#2316) * fix: reset input fields in API delete dialog after reopening * refactor: remove unnecessary useEffect and utilize existing onOpenChange function for dialog * refactor: removed unused imports * Update 3_follow_the_unkey_x_account.md (#2364) Added name to the followed list. Co-authored-by: Andreas Thomas <[email protected]> * ci: add label * feat: add hover to input fields * Added gaps and width for md (#2371) * docs: update overview.mdx (#2384) avaliable -> available * oss.gg side quest 3_follow_the_unkey_x_account.md (#2399) Followed the unkey x account * feat: Following unkey acc on twitter #2407 (#2408) * Feat: Followed Unkey on X * Feat: Followed Unkey on Twitter --------- Co-authored-by: Andreas Thomas <[email protected]> * resolve merge conflicts * resolve merge conflicts --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: chronark <[email protected]> Co-authored-by: Emily Marie Ahtúnan <[email protected]> Co-authored-by: Harsh Shrikant Bhat <[email protected]> Co-authored-by: Aritra Sadhukhan <[email protected]> Co-authored-by: Flo <[email protected]> Co-authored-by: autofix-ci[bot] <114827586+autofix-ci[bot]@users.noreply.github.com> Co-authored-by: Devang Rakholiya <[email protected]> Co-authored-by: Prabin <[email protected]> Co-authored-by: ZiaCodes <[email protected]> Co-authored-by: Devansh Baghel <[email protected]> Co-authored-by: Shreenarayan jaiswal <[email protected]> Co-authored-by: Your Name <[email protected]> Co-authored-by: Chirag Arora <[email protected]> Co-authored-by: Nazar Poshtarenko <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: Saketh Pavan Goti <[email protected]> Co-authored-by: Teddy ASSIH <[email protected]> Co-authored-by: Vardhaman Bhandari <[email protected]> Co-authored-by: Atharva_404 <[email protected]> Co-authored-by: Rishi <[email protected]> Co-authored-by: Ikko Eltociear Ashimine <[email protected]> Co-authored-by: Ayan Mondal <[email protected]> Co-authored-by: Kunal Arya <[email protected]>
unkeyed · Oct 28, 2024 · eb15536 · eb15536
1 parent ca805ac
commit eb15536
Show file tree

Hide file tree

Showing 22 changed files with 461 additions and 400 deletions.
diff --git a/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/keys/[keyAuthId]/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/keys/[keyAuthId]/page.tsx
@@ -7,6 +7,7 @@ import {
   BreadcrumbPage,
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
+import { tags } from "@/lib/cache";
 
 import { getTenantId } from "@/lib/auth";
 import { db } from "@/lib/db";
@@ -33,6 +34,7 @@ async function AsyncPageBreadcrumb(props: PageProps) {
         },
       }),
     ["apiById"],
+    { tags: [tags.api(props.params.apiId)] },
   );
 
   const api = await getApiById(props.params.apiId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/page.tsx
@@ -10,6 +10,7 @@ import { unstable_cache as cache } from "next/cache";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
 import { getTenantId } from "@/lib/auth";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { Suspense } from "react";
 
@@ -33,6 +34,7 @@ async function AsyncPageBreadcrumb(props: PageProps) {
         },
       }),
     ["apiById"],
+    { tags: [tags.api(props.params.apiId)] },
   );
 
   const api = await getApiById(props.params.apiId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/settings/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/apis/[apiId]/settings/page.tsx
@@ -8,6 +8,7 @@ import {
   BreadcrumbSeparator,
 } from "@/components/ui/breadcrumb";
 import { getTenantId } from "@/lib/auth";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -30,6 +31,7 @@ async function AsyncPageBreadcrumb(props: PageProps) {
         },
       }),
     ["apiById"],
+    { tags: [tags.api(props.params.apiId)] },
   );
 
   const api = await getApiById(props.params.apiId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/authorization/permissions/[permissionId]/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/authorization/permissions/[permissionId]/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -19,10 +20,13 @@ type PageProps = {
 };
 
 async function AsyncPageBreadcrumb(props: PageProps) {
-  const getPermissionById = cache(async (permissionId: string) =>
-    db.query.permissions.findFirst({
-      where: (table, { eq }) => eq(table.id, permissionId),
-    }),
+  const getPermissionById = cache(
+    async (permissionId: string) =>
+      db.query.permissions.findFirst({
+        where: (table, { eq }) => eq(table.id, permissionId),
+      }),
+    ["permissionById"],
+    { tags: [tags.permission(props.params.permissionId)] },
   );
 
   const permissions = await getPermissionById(props.params.permissionId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/authorization/roles/[roleId]/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/authorization/roles/[roleId]/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -24,6 +25,8 @@ async function AsyncPageBreadcrumb(props: PageProps) {
       await db.query.roles.findFirst({
         where: (table, { eq }) => eq(table.id, roleId),
       }),
+    ["roleById"],
+    { tags: [tags.role(props.params.roleId)] },
   );
 
   const role = await getWorkspaceByRoleId(props.params.roleId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/logs/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/logs/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -20,11 +21,14 @@ type PageProps = {
 };
 
 async function AsyncPageBreadcrumb(props: PageProps) {
-  const getNamespaceById = cache(async (namespaceId: string) =>
-    db.query.ratelimitNamespaces.findFirst({
-      where: (table, { eq, and, isNull }) =>
-        and(eq(table.id, namespaceId), isNull(table.deletedAt)),
-    }),
+  const getNamespaceById = cache(
+    async (namespaceId: string) =>
+      db.query.ratelimitNamespaces.findFirst({
+        where: (table, { eq, and, isNull }) =>
+          and(eq(table.id, namespaceId), isNull(table.deletedAt)),
+      }),
+    ["namespaceById"],
+    { tags: [tags.namespace(props.params.namespaceId)] },
   );
 
   const namespace = await getNamespaceById(props.params.namespaceId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/overrides/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/overrides/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -20,11 +21,14 @@ type PageProps = {
 };
 
 async function AsyncPageBreadcrumb(props: PageProps) {
-  const getNamespaceById = cache(async (namespaceId: string) =>
-    db.query.ratelimitNamespaces.findFirst({
-      where: (table, { eq, and, isNull }) =>
-        and(eq(table.id, namespaceId), isNull(table.deletedAt)),
-    }),
+  const getNamespaceById = cache(
+    async (namespaceId: string) =>
+      db.query.ratelimitNamespaces.findFirst({
+        where: (table, { eq, and, isNull }) =>
+          and(eq(table.id, namespaceId), isNull(table.deletedAt)),
+      }),
+    ["namespaceById"],
+    { tags: [tags.namespace(props.params.namespaceId)] },
   );
 
   const namespace = await getNamespaceById(props.params.namespaceId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -20,11 +21,15 @@ type PageProps = {
 };
 
 async function AsyncPageBreadcrumb(props: PageProps) {
-  const getNamespaceById = cache(async (namespaceId: string) =>
-    db.query.ratelimitNamespaces.findFirst({
-      where: (table, { eq, and, isNull }) =>
-        and(eq(table.id, namespaceId), isNull(table.deletedAt)),
-    }),
+  const getNamespaceById = cache(
+    async (namespaceId: string) =>
+      db.query.ratelimitNamespaces.findFirst({
+        where: (table, { eq, and, isNull }) =>
+          and(eq(table.id, namespaceId), isNull(table.deletedAt)),
+      }),
+
+    ["namespaceById"],
+    { tags: [tags.namespace(props.params.namespaceId)] },
   );
 
   const namespace = await getNamespaceById(props.params.namespaceId);

diff --git a/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/settings/page.tsx b/apps/dashboard/app/(app)/@breadcrumb/ratelimits/[namespaceId]/settings/page.tsx
@@ -8,6 +8,7 @@ import {
 } from "@/components/ui/breadcrumb";
 
 import { BreadcrumbSkeleton } from "@/components/dashboard/breadcrumb-skeleton";
+import { tags } from "@/lib/cache";
 import { db } from "@/lib/db";
 import { unstable_cache as cache } from "next/cache";
 import { Suspense } from "react";
@@ -20,11 +21,14 @@ type PageProps = {
 };
 
 async function AsyncPageBreadcrumb(props: PageProps) {
-  const getNamespaceById = cache(async (namespaceId: string) =>
-    db.query.ratelimitNamespaces.findFirst({
-      where: (table, { eq, and, isNull }) =>
-        and(eq(table.id, namespaceId), isNull(table.deletedAt)),
-    }),
+  const getNamespaceById = cache(
+    async (namespaceId: string) =>
+      db.query.ratelimitNamespaces.findFirst({
+        where: (table, { eq, and, isNull }) =>
+          and(eq(table.id, namespaceId), isNull(table.deletedAt)),
+      }),
+    ["namespaceById"],
+    { tags: [tags.namespace(props.params.namespaceId)] },
   );
 
   const namespace = await getNamespaceById(props.params.namespaceId);

diff --git a/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx b/apps/dashboard/app/(app)/apis/[apiId]/settings/update-api-name.tsx
@@ -17,6 +17,9 @@ import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
+
+import { tags } from "@/lib/cache";
+import { revalidateTag } from "../../../../actions";
 const formSchema = z.object({
   name: z.string(),
   apiId: z.string(),
@@ -45,6 +48,7 @@ export const UpdateApiName: React.FC<Props> = ({ api }) => {
   const updateName = trpc.api.updateName.useMutation({
     onSuccess() {
       toast.success("Your API name has been renamed!");
+      revalidateTag(tags.api(api.id));
       router.refresh();
     },
     onError(err) {

diff --git a/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx b/apps/dashboard/app/(app)/authorization/permissions/[permissionId]/client.tsx
@@ -1,8 +1,10 @@
 "use client";
 
+import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
+import { tags } from "@/lib/cache";
 
 import {
   Form,
@@ -47,6 +49,7 @@ export const Client: React.FC<Props> = ({ permission }) => {
   const updatePermission = trpc.rbac.updatePermission.useMutation({
     onSuccess() {
       toast.success("Permission updated");
+      revalidateTag(tags.permission(permission.id));
       router.refresh();
     },
     onError(err) {

diff --git a/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx b/apps/dashboard/app/(app)/authorization/roles/[roleId]/update-role.tsx
@@ -1,5 +1,5 @@
 "use client";
-
+import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import {
@@ -22,6 +22,7 @@ import {
 import { Input } from "@/components/ui/input";
 import { Textarea } from "@/components/ui/textarea";
 import { toast } from "@/components/ui/toaster";
+import { tags } from "@/lib/cache";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { DialogTrigger } from "@radix-ui/react-dialog";
@@ -59,6 +60,7 @@ export const UpdateRole: React.FC<Props> = ({ trigger, role }) => {
     },
     onSuccess() {
       toast.success("Role updated");
+      revalidateTag(tags.role(role.id));
       router.refresh();
       setOpen(false);
     },

diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/page.tsx
@@ -19,7 +19,7 @@ import {
 } from "@/lib/tinybird";
 import { BarChart } from "lucide-react";
 import ms from "ms";
-import { notFound } from "next/navigation";
+import { redirect } from "next/navigation";
 import { parseAsArrayOf, parseAsString, parseAsStringEnum } from "nuqs/server";
 import { Filters, type Interval } from "./filters";
 
@@ -49,7 +49,8 @@ export default async function RatelimitNamespacePage(props: {
     },
   });
   if (!namespace || namespace.workspace.tenantId !== tenantId) {
-    return notFound();
+    redirect("/ratelimits");
+    return;
   }
 
   const interval = intervalParser.withDefault("7d").parseServerSide(props.searchParams.interval);

diff --git a/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx b/apps/dashboard/app/(app)/ratelimits/[namespaceId]/settings/update-namespace-name.tsx
@@ -1,4 +1,5 @@
 "use client";
+import { revalidateTag } from "@/app/actions";
 import { Loading } from "@/components/dashboard/loading";
 import { Button } from "@/components/ui/button";
 import {
@@ -12,6 +13,7 @@ import {
 import { FormField } from "@/components/ui/form";
 import { Input } from "@/components/ui/input";
 import { toast } from "@/components/ui/toaster";
+import { tags } from "@/lib/cache";
 import { trpc } from "@/lib/trpc/client";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useRouter } from "next/navigation";
@@ -45,6 +47,7 @@ export const UpdateNamespaceName: React.FC<Props> = ({ namespace }) => {
   const updateName = trpc.ratelimit.namespace.update.name.useMutation({
     onSuccess() {
       toast.success("Your namespace name has been renamed!");
+      revalidateTag(tags.namespace(namespace.id));
       router.refresh();
     },
     onError(err) {

diff --git a/apps/dashboard/app/actions.ts b/apps/dashboard/app/actions.ts
@@ -1,6 +1,12 @@
 "use server";
-import { revalidatePath } from "next/cache";
+import { revalidatePath, revalidateTag } from "next/cache";
 
 export async function revalidate(path: string) {
   revalidatePath(path, "page");
 }
+
+export async function revalidateMyTag(slug: string) {
+  revalidateTag(slug);
+}
+
+export { revalidateMyTag as revalidateTag };
diff --git a/apps/dashboard/lib/cache.ts b/apps/dashboard/lib/cache.ts
@@ -0,0 +1,6 @@
+export const tags = {
+  api: (apiId: string): string => `api-${apiId}`,
+  permission: (permissionId: string): string => `permission-${permissionId}`,
+  namespace: (namespaceId: string): string => `namespace-${namespaceId}`,
+  role: (roleId: string): string => `role-${roleId}`,
+};
diff --git a/apps/www/app/glossary/[slug]/page.tsx b/apps/www/app/glossary/[slug]/page.tsx
@@ -1,6 +1,8 @@
 import { CTA } from "@/components/cta";
 import { Frame } from "@/components/frame";
 
+import { FilterableCommand } from "@/components/glossary/search";
+import TermsRolodexDesktop from "@/components/glossary/terms-rolodex-desktop";
 import TermsStepperMobile from "@/components/glossary/terms-stepper-mobile";
 import { MDX } from "@/components/mdx-content";
 import { TopLeftShiningLight, TopRightShiningLight } from "@/components/svg/background-shiny";
@@ -14,8 +16,6 @@ import Link from "next/link";
 import { notFound } from "next/navigation";
 import { FAQ } from "./faq";
 import Takeaways from "./takeaways";
-import TermsRolodexDesktop from "@/components/glossary/terms-rolodex-desktop";
-import { FilterableCommand } from "@/components/glossary/search";
 
 export const generateStaticParams = async () =>
   allGlossaries.map((term) => ({

diff --git a/apps/www/app/glossary/client.tsx b/apps/www/app/glossary/client.tsx
@@ -2,14 +2,14 @@
 import { CTA } from "@/components/cta";
 import { ChangelogLight } from "@/components/svg/changelog";
 
+import { type Glossary, allGlossaries } from "@/.content-collections/generated";
 import { PrimaryButton } from "@/components/button";
 import { Container } from "@/components/container";
 import { FilterableCommand } from "@/components/glossary/search";
 import { MeteorLinesAngular } from "@/components/ui/meteorLines";
 import { LogIn } from "lucide-react";
-import Link from "next/link";
-import { allGlossaries, type Glossary } from "@/.content-collections/generated";
 import { Zap } from "lucide-react";
+import Link from "next/link";
 
 export function GlossaryClient() {
   const alphabet = "ABCDEFGHIJKLMNOPQRSTUVWXYZ".split("");

diff --git a/apps/www/components/glossary/search.tsx b/apps/www/components/glossary/search.tsx
@@ -1,7 +1,6 @@
 "use client";
 
-import * as React from "react";
-import { Command as CommandPrimitive } from "cmdk";
+import type { Glossary } from "@/.content-collections/generated";
 import {
   Command,
   CommandEmpty,
@@ -10,8 +9,9 @@ import {
   CommandList,
 } from "@/components/ui/command";
 import { cn } from "@/lib/utils";
+import { Command as CommandPrimitive } from "cmdk";
 import { useRouter } from "next/navigation";
-import type { Glossary } from "@/.content-collections/generated";
+import * as React from "react";
 
 export function FilterableCommand(props: {
   placeholder: string;

diff --git a/apps/www/components/glossary/terms-rolodex-desktop.tsx b/apps/www/components/glossary/terms-rolodex-desktop.tsx
@@ -1,12 +1,12 @@
 "use client";
 
-import { useState } from "react";
-import Link from "next/link";
+import type { Glossary } from "@/.content-collections/generated";
 import { Button } from "@/components/ui/button";
-import { ChevronUpIcon, ChevronDownIcon } from "lucide-react";
 import { cn } from "@/lib/utils";
+import { ChevronDownIcon, ChevronUpIcon } from "lucide-react";
+import Link from "next/link";
 import { useParams } from "next/navigation";
-import type { Glossary } from "@/.content-collections/generated";
+import { useState } from "react";
 
 export default function TermsRolodexDesktop({
   className,