4월26일(수) useQuery가 계속 실행됨. 문제해결

지금 contextAPI를 활용해서 중간값을 가지고 페이지를 이동함. 근데 여기서 계속해서 useQuery가 실행됨. 처음에는 중간값 가지고 왔는데 2번째 실행부터 값이 undefined되면서 에러.

왜 이 부분 계속 실행되는지 생각해보니 전에 예상기 매니저님 React-Query 강의 때 staleTime 생각남.

현재 useQuery는 컴포넌트가 렌더링될 때마다 호출되고 있다. 이는 useQuery의 기본 동작 방식임.

한 번만 호출되기를 원하면 useQuery의 staleTime 옵션(최신 데이터가 만료되기 전에는 useQuery가 새로운 데이터를 가져오지 않도록 설정함.)을 사용하는 것 기억. 이렇게해서 처음 한 번만 useQuery가 호출되었다.

const { data, isLoading, isError, refetch } = useQuery({
        queryKey: ['GET_KAKAOAPI'],
        queryFn: async () => {
        console.log("response",response)
        const response = await apis.get(
            // 서버 URL
            `/kakaoApi?y=${midPoint.lat}&x=%20${midPoint.lng}&query=술집&radius=1500&page=1&size=15&sort=distance`,
            // 중간지점 lat,lng값
            midPoint
        );
        return response;
    }}, 
    {
        // 에러 처리
        onError: (error) => {
            console.error(error);
        },
        // 패칭 데이터 상태 변화
        onSettled: (data) => {
            alert(data);
        }
    });

이 코드에서

const { data, isLoading, isError, refetch } = useQuery({
        queryKey: ['GET_KAKAOAPI'],
        queryFn: async () => {
        console.log("response",response)
        const response = await apis.get(
            // 서버 URL
            `/kakaoApi?y=${midPoint.lat}&x=%20${midPoint.lng}&query=술집&radius=1500&page=1&size=15&sort=distance`,
            // 중간지점 lat,lng값
            midPoint
        );
        return response;
    },
    staleTime: 6000000 // 100분 (단위: 밀리초)
    }, 
    {
        // 에러 처리
        onError: (error) => {
            console.error(error);
        },
        // 패칭 데이터 상태 변화
        onSettled: (data) => {
            alert(data);
        }
    });

이 코드로 staleTime: 6000000 // 100분 (단위: 밀리초) 추가.