Description:
I’m working on a Next.js application where I need to revalidate tags after a user submits a quest. The revalidateTag seems to not trigger the route handler correctly. Here’s the setup:
Also all my road work, when i actualize the page the function getQuestStatuses is call and work t is just the revalidateTag who dont do this job.
I use other revalidateTag on my website who work perfectly.
But for that one i don’t find the issue.
I am on nextjs 14 on app router mode and also the road who is call is on express side but the issue is not on express side.
**Function to fetch quest statuses and update cookies:
**
export async function getQuestStatuses() {
const wallet = await getCookie('wallet');
const url = `${backendUrl}/api/next/quest/status/${wallet}`;
const tags = [`questStatus-${wallet}`];
try {
const res = await fetch(url, {
next: { tags: tags },
});
const data = await res.json();
console.log('dataStatus', data);
const newQuestStatuses = data.questCodatas;
console.log('newQuestStatuses', newQuestStatuses);
// Compare new data with previous data and update cookies if necessary
if (
newQuestStatuses.length !== previousQuestStatuses.length ||
JSON.stringify(newQuestStatuses) !== JSON.stringify(previousQuestStatuses)
) {
console.log('Updating quest status cookies');
await updateQuestStatusCookies(newQuestStatuses);
previousQuestStatuses = newQuestStatuses;
}
return newQuestStatuses;
} catch (error) {
console.log('Server error', error);
}
}
**Function to revalidate tag after quest submission:
**
export async function postApproveQuest(formData: FormData) {
const wallet = await getCookie('wallet');
const discordConnect = await getCookie('discordConnect');
const API_URL = `${backendUrl}/api/next/quest/approval`;
formData.append('wallet', wallet);
try {
const res = await fetch(API_URL, {
method: 'POST',
headers: {
Cookie: `discordConnect=${discordConnect}`,
},
body: formData,
});
const data = await res.json();
if (res.ok) {
revalidateTag(`messagenotif-${wallet}`);
revalidateTag(`questStatus-${wallet}`);
}
return data;
} catch (error) {
console.log('Server error', error);
}
}
**Client component to call getQuestStatuses:
**
'use client';
import React, { useEffect } from 'react';
import { getQuestStatuses } from './Action';
interface Props {
wallet: string;
}
export default function CookieForQuestPage({ wallet }: Props) {
useEffect(() => {
getQuestStatuses().then((data) => {
console.log('Quest statuses updated:', data);
});
}, [wallet]);
return null;
}
Despite this setup, the revalidateTag for questStatus-${wallet} doesn’t seem to re-trigger the route handler to fetch the latest data and update the cookies. Other revalidateTag calls in my application work as expected.
What I’ve tried:
Verified that revalidateTag works for other tags.
Confirmed that the function updateQuestStatusCookies correctly updates/deletes cookies based on the quest statuses.
Logs and observations:
The console logs indicate that revalidateTag does not re-trigger the route handler for questStatus-${wallet}.
Any insights on what might be going wrong or additional debugging steps would be appreciated.