wanton crater
I'm having an issue where my swr based fetch is not being revalidated even when page is refreshed.
"use client";
import { Loader2 } from "lucide-react";
import useSWR from "swr";
export default function ViewCount(props: { id: string }) {
const fetcher = async (url: string) => {
const res = await fetch(`${url}?timestamp=${new Date().getTime()}`, {
cache: "no-store", // Ensure no caching by fetch API
});
if (!res.ok) throw new Error("Network response was not ok");
return res.json();
};
const { data, error, isLoading, isValidating } = useSWR(
`/api/vehicles/${props.id}/views`,
fetcher,
{
revalidateOnFocus: true,
revalidateOnReconnect: true,
refreshInterval: 30000, // Set to 0 to disable automatic interval revalidation
}
);
if (error) {
console.error(error);
return <div>Error</div>;
}
return (
<div>
<span className="flex gap-2">
<span>Views:</span>
{isLoading || isValidating ? (
<Loader2 size={20} className="animate-spin" />
) : (
data?.views
)}
</span>
</div>
);
}
even with the timestamp in the URL, it still returns the same value every time in the response
green hollow