useQuery에서 의도적 무한 로딩

꾸준히·2025년 2월 7일

Tanstack Query

목록 보기
1/5

로딩 스피너 위치 작업을 위해 무한 로딩 작업이 필요했다.
그래서 useQuery에서 의도적으로 무한 로딩을 하는 방법을 기재한다.

setTimeout으로 의도적 무한 로딩

const {isLoading, data:movie} = useQuery({
	queryKey: ["genre", cur.genre],
    queryFn: async() => {
    	return new Promise((resolve) => {
        	setTimeout(()=> {
            	resolve(null); // 데이터 반환을 늦추거나 일부러 null을 반환
            }, 3000);
        });
    },
});

3초 후에 데이터 반환되며, 3초 동안 isLoading이 true인 상태


계속 무한로딩

const {isLoading, data:movie} = useQuery({
	queryKey: ["genre", cur.genre],
    queryFn: async() => {
    	return new Promise(() => {}); // 끝나지 않는 Promise
    }
});

무한 로딩이나, 데이터 반환되지 않으니 주의 바람

0개의 댓글