[React] react-query 쿼리로 보내는 값이 변경되지 않을 때

    const { data } = useQuery({
        queryKey:  ['idCheck'],
        queryFn: async () => {
            const response = await fetch(
                `http://localhost:3001/user/join/id-check/${_id}`,
                );
                console.log("들어오니?")
                console.log("!!!!!!!!", _id)
            const data = await response.json();
            return data;
        }, 
            enabled: is_id,
    });
    
    const handleDuplicateCheck = () => {
    	console.log("chck in")
    	queryClient.invalidateQueries(['idCheck']);
    };
    
    const onChangeId = (e) => {
        const currentId = e.target.value;
        setUserId(currentId);
        console.log(currentId)
        // console.log("id", _id)
        if (currentId.length < 2 || currentId.length > 20) {
            setUserIdMsg('아이디는 2자리부터 20자리까지 가능합니다.')
            setIsUserId(false)
        } else {
            setUserIdMsg('사용가능한 아이디입니다.')
            setIsUserId(true)
        }
    }

작성했던 코드는 이랬다.

아이디 옆의 중복확인을 누르면 handleDuplicateCheck라는 함수가 실행되도록 했다.

근데 초반에는 아이디가 앞의 두자리만 가는 현상이 발생했다. setid가 2자리부터 실행되도록해서 그런 것 같다. 처음에는 왜 두자리만 가는지도 몰라서 엄청 헤맸다. 근데 그러다 시간이 조금만 지나면 입력한 값이 그대로 쿼리로 보내진다. 

그리고 invalidateQueries는 쿼리를 무효화시키는 메서드라고 해서 중복체크가 눌릴 때마다 id값을 쿼리를 재생성하려고 했다. 하지만 여전히 같은 문제가 발생했다. 

그렇게 헤매던 중 그러다 문득 react query는 캐시기능이 있다는걸 깨달았다. 이게 react query를 처음 써봐서 그래, , ,

근데 또 키값이 바뀌지 않으면 갖고 있는 캐싱 데이터를 쿼리로 보내준다고 한다. 그래서 키값을 ['idCheck'] => ['idCheck', _id]로 변경했더니 원하는대로 잘 간다. 문제는 해결됐지만 아직 react query가 완전히 이해되지 않았다. 더 알아봐야겠다.

 

 

참고 자료

https://blog.pumpkin-raccoon.com/118