How to correctly refresh api data using useSWRInfinite ?

[NghiaLe2611]

const getKey = (pageIndex: number, previousPageData: any, searchParams: any) => {
	if (previousPageData && (!previousPageData?.length || previousPageData.length < PAGE_SIZE)) {
		return null;
	}
	if (pageIndex === 0) return ['get_list_conditional_orders', null, searchParams];
	const lastId = previousPageData[previousPageData.length - 1]?.id;
	return ['get_list_conditional_orders', lastId, searchParams];
};

async function fetcher(params: Record<string, any>) {
	try {
		const res = await conditionalOrderService.queryConditionalOrder(params);
		return res;
	} catch (err) {
		return null;
	}
}

const [searchFilters, setSearchFilters] = useState<Record<string, any> | null>(null);
const { data, size, setSize, isLoading, isValidating, mutate } = useSWRInfinite(
	(...args) => {
		if (!searchFilters) return null;
		return getKey(...args, searchFilters);
	},
	([, lastId, params]) => fetcher({ lastId, ...params }),
	{
		revalidateAll: false,
		revalidateFirstPage: false,
		revalidateOnMount: true,
		keepPreviousData: true,
	},
);

useEffect(() => {
	setSearchFilters({});
}, []);

const loadingRef = useRef(false);
const isLoadingMore = isLoading || (size > 0 && data && typeof data[size - 1] === 'undefined');
const isEmpty = data?.[0]?.length === 0;
const isReachingEnd = isEmpty || (data && data[data.length - 1]?.length < PAGE_SIZE);

const handleLoadMore = useCallback(() => {
    if (!isLoadingMore && !isReachingEnd && !loadingRef.current) {
        setSize((prevSize) => prevSize + 1);
        loadingRef.current = true;
    }
}, [isLoadingMore, isReachingEnd]);

I did this but it returns an empty array of data

setSize(0);
setSearchFilters({});

Use another way get data correctly but when do scroll more did not load next data

setSize(0);
setSearchFilters({});
setTimeout(async () => {
    const res = await fetcher({});
    mutate(res, false);
}, 0);

Do you have any ideas ?

[NghiaLe2611]

useEffect(() => {
        if (!isValidating) {
            setTimeout(() => {
                loadingRef.current = false;
            }, 300);
        }
    }, [isValidating]);

Just add this to reset loadingRef