Next.js Discord

Discord Forum

How do i revalidate my overview page after deleting a product on the detail page?

Answered
Anhinga posted this in #help-forum
Open in Discord
AnhingaOP
I have an overview page that displays a table of all products. On the products' detail pages i display a button that triggers a server action to delete my product. I await the supabase db action and if no errors came up, i call revalidatePath("products/") and redirect("products/". However, the data after the redirect to the products page is stale and the user would need to do a manual refresh of the page. That is not the optimal user experience, i would like for the overview page to update after deleting a product on the detail page.

Is my understanding of the revalidatePath and redirect functions wrong?
Answered by Anhinga
For anyone running into the same issue: Upgrading next to the canary version solved it
View full answer

7 Replies

AnhingaOP
To clarify, I am using supabase for my data fetching - not fetch itself. Exporting revalidate = 0 in my overview page also did not seem to do the trick. Any help is greatly appreciated 🙂
Golden paper wasp
Did you try revalidatePath = "/yourpath"?
AnhingaOP
Yeah, this is my serverAction code:

export const deleteProductAction = async (formData: FormData) => {
  "use server";
  const productId = formData.get("id");
  const supabase = createServerActionClient({ cookies });
  const { error } = await supabase
    .from("products")
    .delete()
    .eq("id", productId);

  revalidatePath("products/");

  if (error) {
    throw new Error(error.message);
  } else {
    redirect("products/");
  }
};
Golden paper wasp
Can you put the revalidatePath("/products) before the if statement?

export const deleteProductAction = async (productId: string) => {
  "use server";
  const supabase = createServerActionClient({ cookies });
  const { error } = await supabase
    .from("products")
    .delete()
    .eq("id", productId);

 revalidatePath("/products");

  if (error) {
    throw new Error(error.message);
  } 
    redirect("/products");
  }
};
AnhingaOP
The redirect works, but i still get the stale data on the overview page
AnhingaOP
just for the record, this is the code that calls my server action from the product's detail page:

          <form action={deleteProductAction}>
            <input type="hidden" name="id" value={product[0].id} />
            <Button type="submit" variant="outline">
              <Trash size={16} />
            </Button>
          </form>



I really appreciate any tips on how to solve this.
AnhingaOP
For anyone running into the same issue: Upgrading next to the canary version solved it
Answer