revalidate path is not updating old data
Answered
Tamaskan Dog posted this in #help-forum
Tamaskan DogOP
I'm using a server action to delete a product that is displayed in a table, but it doesn't update the data when I use the server action, what am I doing wrong? I saw in the documentation that it is simply calling revalidatePath
Server Action:
Page.jsx:
how do I call the action:
Server Action:
export async function deleteProduct(id) { const session = await auth() if (!session) return { error: 'Não autenticado' } const headerList = headers(); const forwardedHost = headerList.get("x-forwarded-host"); const forwardedProto = headerList.get("x-forwarded-proto") || 'http'; const hostname = new URL(${forwardedProto}://${forwardedHost}).hostname; const user = await prisma.user.findUnique({ where: { domain: hostname, id: session.user.id } }); if (!user) { return { error: 'Usuário não encontrado.' } } const product = await prisma.product.findFirst({ where: { id: id, userId: user.role == "ADMIN" ? undefined : user.id, } }); if (!product) { return { error: 'Produto não encontrado ou não autorizado a deletar.' }; } await prisma.product.delete({ where: { id: product.id, } }); revalidatePath('/p') return 'Deletado com sucesso ' + product.title }
Page.jsx:
export default async function Products() { const data = await findProducts(1); return ( <div> <h1 className="text-xl font-medium mb-4 text-white">Produtos</h1> <ProductDataTable columns={columns} data={{ ...data, pageSize: 50 }} />; </div> ); }
how do I call the action:
<AlertDialogAction
onClick={async () => { await deleteProduct(row.original.id)}}
className="bg-red-800 hover:bg-red-900 w-full text-white shadow">
Continue
</AlertDialogAction>Answered by Tamaskan Dog
I found the solution in case anyone has the same problem, I put the data in a useState
21 Replies
Tamaskan DogOP
@Tamaskan Dog Click to see attachment
And you still see stale data?
Tamaskan DogOP
yes
Do you want me to record the screen?
@Tamaskan Dog Do you want me to record the screen?
Can you do „router.refresh()“ after the deletion?
@B33fb0n3 Can you do „router.refresh()“ after the deletion?
Tamaskan DogOP
I can, but then it will update the page, I saw some tutorials on YouTube where revalidatePath updates beautifully without updating :C I wanted to know what I'm doing wrong so it doesn't work in my example
@Tamaskan Dog I can, but then it will update the page, I saw some tutorials on YouTube where revalidatePath updates beautifully without updating :C I wanted to know what I'm doing wrong so it doesn't work in my example
The router refresh should also only refresh the content, that is updated and shouldn’t completely reload (browser reload) the page
Tamaskan DogOP
Does useRouter need to be in a react component right? because I call the action in the columns file of the tanstack table
const router = useRouter();
export const columns = [
{
header: "Ações",
id: "actions",
cell: ({ row }) => {
return (
<div className="flex gap-x-1.5 items-center ">
<TbEdit size={15} className="mr-2 cursor-pointer" />
<AlertDialogHeader>
<AlertDialogTitle>Você tem certeza disso?</AlertDialogTitle>
<AlertDialogDescription className="text-slate-200">
Essa ação não pode ser revertida, isso irá apagar o produto{" "}
{row.original.title}
</AlertDialogDescription>
</AlertDialogHeader>
<AlertDialogFooter>
<AlertDialogCancel className="bg-slate-200 shadow w-full text-gray-800">
Cancel
</AlertDialogCancel>
<AlertDialogAction
onClick={async () => {
let res = await deleteProduct(row.original.id);
toast(res?.error || res, {
style: {
borderRadius: "10px",
background: "#333",
color: "#fff",
},
});
router.refresh();
}}
className="bg-red-800 hover:bg-red-900 w-full text-white shadow"
>
Continue
</AlertDialogAction>
</div>
);
},
enableSorting: false,
enableHiding: false,
},
];So it shouldn't work for me then
Tamaskan DogOP
Nothing makes this data update 😭😭
Can you show the „findProducts“ function?
Tamaskan DogOP
export async function findProducts(page = 1, orderBy, searchTerm = '', type = 'ALL') {
const session = await auth();
if (!session) return { error: 'Não autenticado' };
let pageSize = 50;
const skip = (page - 1) * pageSize;
const products = await prisma.product.findMany({
skip,
take: pageSize,
orderBy: orderBy?.id ? { [orderBy.id]: orderBy.desc ? 'desc' : 'asc' } : { createdAt: 'desc' },
where: {
userId: session.user.role == "ADMIN" ? undefined : session.user.id,
title: {
contains: searchTerm ? searchTerm : undefined,
},
type: type === 'ALL' ? undefined : type
}
});
const total = await prisma.product.count({
where: {
userId: session.user.role == "ADMIN" ? undefined : session.user.id,
title: {
contains: searchTerm ? searchTerm : undefined,
},
type: type === 'ALL' ? undefined : type,
}
});
return { products, total };
};
const session = await auth();
if (!session) return { error: 'Não autenticado' };
let pageSize = 50;
const skip = (page - 1) * pageSize;
const products = await prisma.product.findMany({
skip,
take: pageSize,
orderBy: orderBy?.id ? { [orderBy.id]: orderBy.desc ? 'desc' : 'asc' } : { createdAt: 'desc' },
where: {
userId: session.user.role == "ADMIN" ? undefined : session.user.id,
title: {
contains: searchTerm ? searchTerm : undefined,
},
type: type === 'ALL' ? undefined : type
}
});
const total = await prisma.product.count({
where: {
userId: session.user.role == "ADMIN" ? undefined : session.user.id,
title: {
contains: searchTerm ? searchTerm : undefined,
},
type: type === 'ALL' ? undefined : type,
}
});
return { products, total };
};
But neither router.refresh() nor revalidatePath() worked
Do you have any idea what it could be?
@Tamaskan Dog Do you have any idea what it could be?
No, I am sorry
Tamaskan DogOP
I found the solution in case anyone has the same problem, I put the data in a useState
Answer