Revalidation not working When revalidatePath and revalidateTag are executed consecutively in Next14
Wonje Jangerror • Tue Apr 23 2024 19:04
Situation
After the execution of revalidatePath, the revalidateTag does not work. As a result, only the path is revalidated, but not the paging request.
javascript
1const handleClkBtnUpload = async () => {
2 try {
3 if(isEdit) {
4 revalidatePath(path)
5 }
6
7 revalidateTag('paging')
8 /* ... */
9
10 } catch(err) {
11 // error handling
12 }
13}
Reason
- The problem of revalidateTag
- Consecutive execution of revalidatePath and revalidateTag
How to fix it?
use Promise to confirm the completion of execution.
javascript
1"use server";
2
3import { revalidateTag, revalidatePath } from "next/cache";
4
5export async function pathRevalidation(path, option = null) {
6 return new Promise((resolve, reject) => {
7 resolve(revalidatePath(path, option));
8 });
9}
10
11export async function tagRevalidation(tag) {
12 return new Promise((resolve, reject) => {
13 resolve(revalidateTag(tag));
14 });
15}
16javascript
1import { pathRevalidation, tagRevalidation } from "@/lib/revalidate";
2
3const handleClkBtnUpload = async () => {
4 try {
5 if(isEdit) {
6 await pathRevalidation(path)
7 }
8
9 await tagRevalidation ('paging')
10 /* ... */
11
12 } catch(err) {
13 /* ... */
14 }
15}
Update
I don't know why, but the revalidateTag sometimes not working. I would recommend using revalidatePath instead of revalidateTag