Needs to clear cache in dev (stuck fetching), but works in prod
My webapp is using nextjs14. When i load the page, the query is stuck in fetching. when I update a filter the query works, and fetch every 3 sec as i want to. but when i remove every filter, the request is stuck in fetching. This is the code
"use client";
... <imports> ...
export default function AlertSection() {
const { pageNumber, pageSize, setTotalPages, setOrigins, setSelectedOrigins, selectedOrigins } = usePagination();
// Get the param ?query= from the URL
const searchParams = useSearchParams();
const query = searchParams.get("query") ?? "";
// Initialize the router
const router = useRouter();
// If query is empty, remove it from the URL
useEffect(() => {
if (!query) {
const url = new URL(window.location.href);
url.searchParams.delete('query'); // Remove the query parameter
// Update the URL without triggering a page reload
router.push(`${url.pathname}?${url.searchParams.toString()}`, undefined);
}
}, [query, router]);
// Use the custom filters hook
const { filters } = useFilters(); // Get the current filters
const { data, error, isSuccess } = useQuery({
queryKey: ["alerts", pageNumber, pageSize, filters.showAllMatch, filters.showUnread, query], // Unique query key
queryFn: () => fetchAlertsPages(pageNumber, pageSize, filters, query),
staleTime: 0,
gcTime: 0,
});
const updateFilters = useCallback(() => {
if (isSuccess && data) {
setTotalPages(data.totalPages);
setOrigins(data.origins);
if (selectedOrigins.length === data.origins.length && selectedOrigins.length > 0) {
setSelectedOrigins([]);
}
}
}, [isSuccess, data, setTotalPages, setOrigins, setSelectedOrigins, selectedOrigins]);
useEffect(() => {
updateFilters();
}, [updateFilters]);
if (error) return <h1>Error: {error.message}</h1>;
const alerts = data?.alerts ?? [];
return <AlertsTable alerts={alerts} />;
}
"use client";
... <imports> ...
export default function AlertSection() {
const { pageNumber, pageSize, setTotalPages, setOrigins, setSelectedOrigins, selectedOrigins } = usePagination();
// Get the param ?query= from the URL
const searchParams = useSearchParams();
const query = searchParams.get("query") ?? "";
// Initialize the router
const router = useRouter();
// If query is empty, remove it from the URL
useEffect(() => {
if (!query) {
const url = new URL(window.location.href);
url.searchParams.delete('query'); // Remove the query parameter
// Update the URL without triggering a page reload
router.push(`${url.pathname}?${url.searchParams.toString()}`, undefined);
}
}, [query, router]);
// Use the custom filters hook
const { filters } = useFilters(); // Get the current filters
const { data, error, isSuccess } = useQuery({
queryKey: ["alerts", pageNumber, pageSize, filters.showAllMatch, filters.showUnread, query], // Unique query key
queryFn: () => fetchAlertsPages(pageNumber, pageSize, filters, query),
staleTime: 0,
gcTime: 0,
});
const updateFilters = useCallback(() => {
if (isSuccess && data) {
setTotalPages(data.totalPages);
setOrigins(data.origins);
if (selectedOrigins.length === data.origins.length && selectedOrigins.length > 0) {
setSelectedOrigins([]);
}
}
}, [isSuccess, data, setTotalPages, setOrigins, setSelectedOrigins, selectedOrigins]);
useEffect(() => {
updateFilters();
}, [updateFilters]);
if (error) return <h1>Error: {error.message}</h1>;
const alerts = data?.alerts ?? [];
return <AlertsTable alerts={alerts} />;
}
1 Reply
homely-roseOP•11mo ago
and the request works in dev after i press the button "clear query cache". but then stuck in fetching if i reload the page