I have a page component using use cache rendering tournament detail
export default async function TournamentPairingsAllPage({ params }: { params: Promise<{ id: string }> }) {
'use cache';
const { id } = await params;
unstable_cacheTag(getTournamentCacheKey(id));
console.log(`cache miss: all pairings: ${getTournamentCacheKey(id)}`);
const tournamentResult = await loadTournament(id);
if (!tournamentResult) {
return null;
}
return <Pairings tournament={tournamentResult} />;
}
and a server action for uploading tournaments that revalidates cache
console.log(`uploading: ${tournamentId}`);
revalidateTag(getAllTournamentsCacheKey());
console.log(`revalidated: ${getAllTournamentsCacheKey()}`);
revalidateTag(getOrganizationTournamentsCacheKey(orgId));
console.log(`revalidated: ${getOrganizationTournamentsCacheKey(orgId)}`);
revalidateTag(getTournamentCacheKey(tournamentId));
console.log(`revalidated: ${getTournamentCacheKey(tournamentId)}`);
I start app, render detail for tournament A and B. I get "cache miss" for both. Reload does not print anything. After calling upload for A which causes revalidate for A, following reloads of A and B print cache miss again. Only A should be reloaded, B should be still cached. Am I missing something?