Benfa Posts - Answer Overflow

Benfa

•Created by Benfa on 3/4/2025 in #questions

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()
}

4 replies

TTCTheo's Typesafe Cult

•Created by Benfa on 9/16/2024 in #questions

Correct setup for user-store with zustand react-query and axios

I'm starting a new react project and i trying to use all these library together: - zustand - react-query - axios - react router I want to configured axios to redirect the user to the login page when the apis respond with a 401, Then i want to create a userStore which loads the user info from local storage so i'm using zustand persist middleware Now when the react app starts i want to call /api/auth/me to verify that the user is still logged in and that the information in the userStore are up to date. For this i want to use use react query to make an api using the axiosInterceptor instance declered above and i cannot find where i can do that. I will also need to retrive a csrf token and set it in the header inside axios but i haven't worked on it yet I'm i doing this correctly? you can find the relevant code in the attachments

2 replies

Gaming

Programming