revalidateTag not working. Any advice?
Unanswered
Perro de Presa Mallorquin posted this in #help-forum
Perro de Presa MallorquinOP
Hi, I've tried a bunch of different ways to try and get revalidateTag to work, but no joy. I have resorted to falling back to revalidatePath for everything. Anyone have any advice?
- https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
- https://github.com/sprintup/ivystreetblog/blob/ed223c1c578d6bc1c7f691b74be9f327ed0b3652/app/public-bookshelf/public-booklist/%5Bid%5D/page.jsx#L27
The actual public booklist is here https://ivystreetblog.vercel.app/public-bookshelf and when I add something (booklist, book, etc.) I have to revalidate the path in order for it to show up. I'd rather use revalidateTag. I've tried:
- deactivating cache https://github.com/sprintup/ivystreetblog/commit/418743a8de5b64977dc1fe1351166d9cb2684e68
- revalidating the tag with the fetch API: https://nextjs.org/docs/app/building-your-application/caching#fetch-optionsnexttags-and-revalidatetag
But again, the data doesn't show when I switch pages unless I revalidatePath. For instance, if I add a public booklist with a book (using revalidateTag -> not currently implemented) I'd have to refresh the page for it to show up on the public bookshelf. Therefor, I implemented revalidatePath, which basically bypasses the caching feature, which is not optimal but it works. I'd like it to be fast.
- https://nextjs.org/docs/app/building-your-application/caching#invalidation-1
- https://github.com/sprintup/ivystreetblog/blob/ed223c1c578d6bc1c7f691b74be9f327ed0b3652/app/public-bookshelf/public-booklist/%5Bid%5D/page.jsx#L27
The actual public booklist is here https://ivystreetblog.vercel.app/public-bookshelf and when I add something (booklist, book, etc.) I have to revalidate the path in order for it to show up. I'd rather use revalidateTag. I've tried:
- deactivating cache https://github.com/sprintup/ivystreetblog/commit/418743a8de5b64977dc1fe1351166d9cb2684e68
- revalidating the tag with the fetch API: https://nextjs.org/docs/app/building-your-application/caching#fetch-optionsnexttags-and-revalidatetag
But again, the data doesn't show when I switch pages unless I revalidatePath. For instance, if I add a public booklist with a book (using revalidateTag -> not currently implemented) I'd have to refresh the page for it to show up on the public bookshelf. Therefor, I implemented revalidatePath, which basically bypasses the caching feature, which is not optimal but it works. I'd like it to be fast.
1 Reply
revalidateTag must be called from a server action. this is what I did on my project:
Then you will make a call to RevalidateTag instead of revalidateTag. What I did here was place this as action of a button:
"use server";
import { revalidateTag } from "next/cache";
export async function RevalidateTag(tag: string) {
revalidateTag(tag);
}
Then you will make a call to RevalidateTag instead of revalidateTag. What I did here was place this as action of a button:
export function RevalidateTagButton({
tag,
onSuccess,
}: {
tag: string;
onSuccess?: () => void;
}) {
const handleAction = async () => {
await RevalidateTag(tag);
onSuccess?.();
};
return (
<>
<form action={handleAction}>
<RefreshButton />
</form>
</>
);
}