TTC
Theo's Typesafe Cult•2mo ago
Benfa

Cache issue

I'm trying to make a simple list view, fetching data from db but when i build the project the page become static and doesn't update. I tired to wrap db.insert(habit).values(data).execute() into unstale_cache(() => {}, [], {tags: ['habits']}) and call revalidateTag("habits") but even in that case the page still didn't update. Any suggestions? 
// page.tsx
import { HabitList } from "~/components/habit-page/habit-list"
import { listHabits } from "~/server/db/queries"

export default async function Home() {
  const habits = await listHabits()

  if (!habits){
    return <div>Loading...</div>
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-4xl px-4 py-8 md:px-8 mx-auto">
        <h1 className="mb-8 text-4xl font-bold tracking-tight">Strong Habit</h1>
          <HabitList habits={habits}/>
      </div>
    </div>
  )
}
// page.tsx
import { HabitList } from "~/components/habit-page/habit-list"
import { listHabits } from "~/server/db/queries"

export default async function Home() {
  const habits = await listHabits()

  if (!habits){
    return <div>Loading...</div>
  }

  return (
    <div className="min-h-screen bg-background">
      <div className="max-w-4xl px-4 py-8 md:px-8 mx-auto">
        <h1 className="mb-8 text-4xl font-bold tracking-tight">Strong Habit</h1>
          <HabitList habits={habits}/>
      </div>
    </div>
  )
}
// ~/server/db/queries
import "server-only"

import { InferInsertModel } from "drizzle-orm";
import { db } from "~/server/db";
import { habit } from "~/server/db/schema";

export async function createHabit(data: InferInsertModel<typeof habit>) {
    return db.insert(habit).values(data).execute()
}

export async function listHabits() {
    return await db.select().from(habit).orderBy(habit.createdAt).execute()
}
// ~/server/db/queries
import "server-only"

import { InferInsertModel } from "drizzle-orm";
import { db } from "~/server/db";
import { habit } from "~/server/db/schema";

export async function createHabit(data: InferInsertModel<typeof habit>) {
    return db.insert(habit).values(data).execute()
}

export async function listHabits() {
    return await db.select().from(habit).orderBy(habit.createdAt).execute()
}
2 Replies
Xanacas
Xanacas•2mo ago
Does refreshing help? Which nextjs version are you on? Your createhabbit is the place where you want to mark existing data as dirty. On the page you want to refresh/reload the data after you updated the list (or update with what the server action returns)
Rivenris
Rivenris•2mo ago
1. Wrap select in unstale_cache, not insert. Insert should revalidateTag but selecting is what should actually be cached. 2. Have you tried adding export const dynamic = 'force-dynamic' above the page? This will prevent static generation of the page. Your data cache should still be used fine.

Did you find this page helpful?