From 9e300e0ff0c9d93cbaeaa86c1e2a560523107382 Mon Sep 17 00:00:00 2001 From: Sebastien Castiel Date: Mon, 29 Jan 2024 22:37:13 -0500 Subject: [PATCH] =?UTF-8?q?Use=20React=E2=80=99s=20cache=20to=20avoid=20so?= =?UTF-8?q?me=20queries=20to=20the=20database?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/cached-functions.ts | 17 +++++++++++++++++ src/app/groups/[groupId]/balances/page.tsx | 5 +++-- src/app/groups/[groupId]/edit/page.tsx | 5 +++-- .../expenses/[expenseId]/edit/page.tsx | 4 ++-- .../groups/[groupId]/expenses/create/page.tsx | 5 +++-- src/app/groups/[groupId]/expenses/page.tsx | 9 ++++++--- src/app/groups/[groupId]/layout.tsx | 6 +++--- src/lib/prisma.ts | 4 +++- 8 files changed, 40 insertions(+), 15 deletions(-) create mode 100644 src/app/cached-functions.ts diff --git a/src/app/cached-functions.ts b/src/app/cached-functions.ts new file mode 100644 index 0000000..cc148fd --- /dev/null +++ b/src/app/cached-functions.ts @@ -0,0 +1,17 @@ +import { getGroup } from '@/lib/api' +import { cache } from 'react' + +function logAndCache

(fn: (...args: P) => R) { + const cached = cache((...args: P) => { + // console.log(`Not cached: ${fn.name}…`) + return fn(...args) + }) + return (...args: P) => { + // console.log(`Calling cached ${fn.name}…`) + return cached(...args) + } +} + +export const cached = { + getGroup: logAndCache(getGroup), +} diff --git a/src/app/groups/[groupId]/balances/page.tsx b/src/app/groups/[groupId]/balances/page.tsx index 31dbf63..b35a379 100644 --- a/src/app/groups/[groupId]/balances/page.tsx +++ b/src/app/groups/[groupId]/balances/page.tsx @@ -1,3 +1,4 @@ +import { cached } from '@/app/cached-functions' import { BalancesList } from '@/app/groups/[groupId]/balances-list' import { ReimbursementList } from '@/app/groups/[groupId]/reimbursement-list' import { @@ -7,7 +8,7 @@ import { CardHeader, CardTitle, } from '@/components/ui/card' -import { getGroup, getGroupExpenses } from '@/lib/api' +import { getGroupExpenses } from '@/lib/api' import { getBalances, getSuggestedReimbursements } from '@/lib/balances' import { Metadata } from 'next' import { notFound } from 'next/navigation' @@ -21,7 +22,7 @@ export default async function GroupPage({ }: { params: { groupId: string } }) { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() const expenses = await getGroupExpenses(groupId) diff --git a/src/app/groups/[groupId]/edit/page.tsx b/src/app/groups/[groupId]/edit/page.tsx index be1a5a8..c174c37 100644 --- a/src/app/groups/[groupId]/edit/page.tsx +++ b/src/app/groups/[groupId]/edit/page.tsx @@ -1,5 +1,6 @@ +import { cached } from '@/app/cached-functions' import { GroupForm } from '@/components/group-form' -import { getGroup, getGroupExpensesParticipants, updateGroup } from '@/lib/api' +import { getGroupExpensesParticipants, updateGroup } from '@/lib/api' import { groupFormSchema } from '@/lib/schemas' import { Metadata } from 'next' import { notFound, redirect } from 'next/navigation' @@ -13,7 +14,7 @@ export default async function EditGroupPage({ }: { params: { groupId: string } }) { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() async function updateGroupAction(values: unknown) { diff --git a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx index 8455d4d..65b2b50 100644 --- a/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx +++ b/src/app/groups/[groupId]/expenses/[expenseId]/edit/page.tsx @@ -1,9 +1,9 @@ +import { cached } from '@/app/cached-functions' import { ExpenseForm } from '@/components/expense-form' import { deleteExpense, getCategories, getExpense, - getGroup, updateExpense, } from '@/lib/api' import { expenseFormSchema } from '@/lib/schemas' @@ -21,7 +21,7 @@ export default async function EditExpensePage({ params: { groupId: string; expenseId: string } }) { const categories = await getCategories() - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() const expense = await getExpense(groupId, expenseId) if (!expense) notFound() diff --git a/src/app/groups/[groupId]/expenses/create/page.tsx b/src/app/groups/[groupId]/expenses/create/page.tsx index 29a060f..2d580d3 100644 --- a/src/app/groups/[groupId]/expenses/create/page.tsx +++ b/src/app/groups/[groupId]/expenses/create/page.tsx @@ -1,5 +1,6 @@ +import { cached } from '@/app/cached-functions' import { ExpenseForm } from '@/components/expense-form' -import { createExpense, getCategories, getGroup } from '@/lib/api' +import { createExpense, getCategories } from '@/lib/api' import { expenseFormSchema } from '@/lib/schemas' import { Metadata } from 'next' import { notFound, redirect } from 'next/navigation' @@ -15,7 +16,7 @@ export default async function ExpensePage({ params: { groupId: string } }) { const categories = await getCategories() - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() async function createExpenseAction(values: unknown) { diff --git a/src/app/groups/[groupId]/expenses/page.tsx b/src/app/groups/[groupId]/expenses/page.tsx index 27f411a..0c36166 100644 --- a/src/app/groups/[groupId]/expenses/page.tsx +++ b/src/app/groups/[groupId]/expenses/page.tsx @@ -1,3 +1,4 @@ +import { cached } from '@/app/cached-functions' import { ActiveUserModal } from '@/app/groups/[groupId]/expenses/active-user-modal' import { ExpenseList } from '@/app/groups/[groupId]/expenses/expense-list' import { Button } from '@/components/ui/button' @@ -9,13 +10,15 @@ import { CardTitle, } from '@/components/ui/card' import { Skeleton } from '@/components/ui/skeleton' -import { getGroup, getGroupExpenses } from '@/lib/api' +import { getGroupExpenses } from '@/lib/api' import { Download, Plus } from 'lucide-react' import { Metadata } from 'next' import Link from 'next/link' import { notFound } from 'next/navigation' import { Suspense } from 'react' +export const revalidate = 3600 + export const metadata: Metadata = { title: 'Expenses', } @@ -25,7 +28,7 @@ export default async function GroupExpensesPage({ }: { params: { groupId: string } }) { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() return ( @@ -84,7 +87,7 @@ export default async function GroupExpensesPage({ } async function Expenses({ groupId }: { groupId: string }) { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() const expenses = await getGroupExpenses(group.id) diff --git a/src/app/groups/[groupId]/layout.tsx b/src/app/groups/[groupId]/layout.tsx index fc76b61..cb31df7 100644 --- a/src/app/groups/[groupId]/layout.tsx +++ b/src/app/groups/[groupId]/layout.tsx @@ -1,7 +1,7 @@ +import { cached } from '@/app/cached-functions' import { GroupTabs } from '@/app/groups/[groupId]/group-tabs' import { SaveGroupLocally } from '@/app/groups/[groupId]/save-recent-group' import { ShareButton } from '@/app/groups/[groupId]/share-button' -import { getGroup } from '@/lib/api' import { Metadata } from 'next' import Link from 'next/link' import { notFound } from 'next/navigation' @@ -16,7 +16,7 @@ type Props = { export async function generateMetadata({ params: { groupId }, }: Props): Promise { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) return { title: { @@ -30,7 +30,7 @@ export default async function GroupLayout({ children, params: { groupId }, }: PropsWithChildren) { - const group = await getGroup(groupId) + const group = await cached.getGroup(groupId) if (!group) notFound() return ( diff --git a/src/lib/prisma.ts b/src/lib/prisma.ts index 2886a89..08ec624 100644 --- a/src/lib/prisma.ts +++ b/src/lib/prisma.ts @@ -9,7 +9,9 @@ export async function getPrisma() { prisma = new PrismaClient() } else { if (!(global as any).prisma) { - ;(global as any).prisma = new PrismaClient() + ;(global as any).prisma = new PrismaClient({ + // log: [{ emit: 'stdout', level: 'query' }], + }) } prisma = (global as any).prisma }