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.