How to revalidate data from the client component

[tduraj]

I think it's a really common scenario, but I didn't see any source on how to handle it.
The frontend is made in Next.js 13 and all resources are fetched from an external API.
So let's say there is a /products page with a list of products. Because they are not changing often, I'm doing a revalidation of this resource once per hour.

const products = fetch('/products, {
    next: { revalidate: 3600, tags: ['products'] } 
})

On this page there is also a new product form

<>
  <ProductForm />
  <ProductsList />
<>

The user is adding a new item using POST request to an external API...how to invalidate this page after adding the new one? router.refresh() is not a solution, because the data is still cached on a server, invalidateTag can't be used on a client side.
I thought about it for a while and only solution comes to my mind is server action. Something like this:

//revalidateTag.ts
"use server";

const customRevalidateTag = (tag: string) => {
    revalidateTag(tag);
}

//ProductForm.tsx
"use client";

const ProductForm = () => {
    const addNewProduct = async () => {
        await fetch("/product/add", { method: "POST", body: {} });
        revalidateTag("products");
    }
  
    return (
        ...
        <button onClick={addNewProduct}>Add new product</button>
    )
}

It works, but for me, it looks like some kind of workaround. Do you know any better approach to handling cases like this?

[icyJoseph]

I'd recommend reading through, #54075

I guess, after your user adds a new item you can call router.refresh?

[tduraj]

Not really, because router.refresh works only for the client side and because I'm caching the result on the server side, the user will receive stale data.
The resource you sent me confirms my belief that the only working solution is this one with the server action I posted above

[icyJoseph]

Mmm yeah, I misunderstood that you had it cached server side.

Then yeah, you have to invalidate the tag.

[ataschz]

You can call a server action from a client component:

First, define your server-action like this:

// actions.ts
'use server;

export function myAction(formData: FormData) {
    // Validate the formData with Zod (optional)
    const body = {
        value1: formData.get('value1'),
        value2: formData.get('value2')
    }

    await fetch("/product/add", { method: "POST", body });
    revalidateTag('your_tag')
}

Then, use it into client component:

'use client';

export function YourComponent() {
    return <form>
        <input name="value1" />
        <input name="value2" />
        <button type="submit" onClick={myAction}>Click me!</button>
    </form>
}

[TaifurIslamAshraf]

its work fine

//revalidateTag.ts
"use server";

const customRevalidateTag = (tag: string) => {
revalidateTag(tag);
}

//ProductForm.tsx
"use client";

const ProductForm = () => {
const addNewProduct = async () => {
await fetch("/product/add", { method: "POST", body: {} });
revalidateTag("products");
}

return (
    ...
    <button onClick={addNewProduct}>Add new product</button>
)

}

[vk-0-7]

what if the admin panel from where you are adding new product is a different folder . Will this code work?