Hello, I am having a problem when seeing data reflected in my production, a problem that does not happen at local. The following occurs: I am calling an external API to bring information from live soccer matches, in my localhost it works well, the matches that are live are shown and updated the information every 2 minutes to know the minute in which the game; However, the same does not happen in Vercel, I see outdated information and it is not updated even if the browser refreshes.
I don’t know that I could be happening but I would appreciate your help, this is my code:
“/” principal page:
export default async function Home() {
const favMatches = await getFavoriteMatches();
return (
<div className="flex flex-col w-full xl:grid xl:grid-cols-[60%_1fr] gap-5 h-full">
<Matches favMatches={favMatches} />
</div>
);
}
Matches component:
export default function Matches({
leagueId,
favMatches,
}: {
leagueId?: string;
favMatches?: { match_id: string }[] | null;
}) {
const {
events: favorites,
isLoading: favLoading,
isValidating: favValidating,
} = useGetFavoritesMatches({
matchesId: favMatches,
});
const {
events,
selectedMatches,
setSelectMatchesStatus,
isLoading,
isValidating,
} = useGetMatches({ leagueId });
const { livescores, livescoreDetails } = useGetLivescores({ events });
if (isLoading || isValidating || favLoading || favValidating) {
return <MatchesSkeleton />;
}
return (
<CustomCard
cardClass="xl:max-h-[200vh]"
body={
<section>
<header className="flex flex-col 2xl:flex-row items-center justify-between gap-5 p-5 sticky top-0 bg-[#0d0d0d] z-50">
<p className="text-2xl font-semibold">Partidos</p>
<MatchStatusTabs
selectedMatchStatus={selectedMatches}
setSelectMatchesStatus={setSelectMatchesStatus}
/>
</header>
{selectedMatches === 'all' && (
<AllMatches
leagueId={leagueId}
events={events ?? []}
favMatches={favMatches}
/>
)}
{selectedMatches === 'live' && (
<LiveMatches
leagueId={leagueId}
livescores={livescores ?? []}
details={livescoreDetails ?? []}
/>
)}
{selectedMatches === 'favs' && (
<AllMatches
leagueId={leagueId}
events={favorites?.map((favs) => favs) ?? []}
favMatches={favMatches}
/>
)}
</section>
}
/>
);
}
useGetLivescores function:
export default function useGetLivescores({ events }: { events?: Event[] }) {
const pathname = usePathname();
const livescoreUrl = pathname.includes('league')
? `/api/league-livescore/${pathname.split('/')[2]}`
: '/api/livescore';
const { data: livescoreResponse } = useSWR<LiveScoreResponse>(livescoreUrl, {
refreshInterval: 120000,
});
const livescores = livescoreResponse?.livescore;
const livescoreDetails = livescores?.map((match) => {
const event = events?.find((e) => e.idEvent === match.idEvent);
if (event) {
return {
league: event.strLeague,
leagueId: event.idLeague,
season: event.strSeason,
country: event.strCountry,
leagueBadge: event.strLeagueBadge,
};
} else {
return {
league: '',
leagueId: '',
season: '',
country: '',
leagueBadge: '',
};
}
});
return {
livescoreDetails,
livescores,
};
}
My api route:
export async function GET(req: Request) {
console.log('Ruta /api/livescore llamada');
try {
const { data } = await axios.get<LiveScoreResponse>(
`${API_V2_URL}/livescore/Soccer`,
{
headers: {
'X-API-KEY': API_KEY,
},
}
);
console.log('data', data);
const popularMatches = data?.livescore?.filter(({ idLeague }) =>
POPULAR_LEAGUES.includes(idLeague)
);
console.log('popularMatches', popularMatches);
return NextResponse.json(
{
livescore: popularMatches,
},
{
headers: {
'Cache-Control': 'no-store', // Desactiva la caché
},
}
);
} catch (error) {
return NextResponse.json({
livescore: [],
});
}
}
My route works if I go to the endpoint, but I don’t know why in the log logs in Vercel do not appear to me.
I appreciate any information, I do not understand why in Vercel it does not work the same as at local and it even seems that the route will not work since I do not see the logs, however it works since I do not get any error and I get data but outdated but outdated
Deployment URL or Custom Domain: Private
Environment (local, preview, production): Preview
Project Framework: NextJS (App router)
Build Settings:
Framework Preset: NextJS (App router)
Build Command (if not default): default
Output Directory (if not default): default
Install Command (if not default): default
Node/Runtime Version: v20.9.0
I don´t understand how to fetch data every 120 seconds