I’m working on a Next.js project with Drizzle ORM where I can create and update tasks. After submitting the task form, I get navigated back to the homepage, but the new/updated task isn’t displayed until I manually refresh the page. Here’s the relevant code:
TaskForm.tsx
(Client Component):
const onSubmit = async (values) => {
const response =
type === OperationType.Create
? await addTask(values)
: await updateTask(defaultValues?.id ?? 0, { ...defaultValues, ...values });
toast(response.message);
if (response.success) {
form.reset();
router.refresh(); // Trying to refresh the page
router.push(redirect ?? "/"); // Redirect to homepage after submission
}
};
app/page.tsx
(Server Component):
export const revalidate = 0; // Disable ISR
export default async function Home() {
const tasks = await getTasks();
const completedTasks = tasks.filter(task => task.isCompleted);
const incompleteTasks = tasks.filter(task => !task.isCompleted);
return (
<div className="container">
<h1>Incomplete Tasks</h1>
<TodoListTable data={incompleteTasks} />
<h1>Completed Tasks</h1>
<CompletedListTable data={completedTasks} />
</div>
);
}
actions.ts
(Server Actions for Drizzle ORM):
export async function addTask(task) {
try {
db.insert(tasks).values(task).run();
return { success: true, message: "Task created successfully" };
} catch (error) {
return { success: false, message: "Error creating task" };
}
}
The task is created or updated successfully, but when the page navigates back to the homepage, I don’t see the new task unless I manually refresh the page.
What I’ve Tried:
- I’ve used
router.refresh()
to refetch the page, but it doesn’t seem to update the homepage’s data after task submission. - I disabled ISR using
export const revalidate = 0;
inapp/page.tsx
to make sure that fresh data is fetched every time. - Tried both
router.replace()
androuter.push()
but no difference in behavior.
What am I missing? How can I ensure the homepage always reflects the updated task list after submission without a manual refresh?