[TanStack Query] Type has no properties in common with type invalidateQueries 에러 해결

발견한 에러

questrip에서 맛집을 추천하는 페이지인 Recommend 페이지를 개발하고 있다.

이 페이지에서는 서버로부터 10개 이상의 추천 데이터를 받아오지만 유저에게는 1개씩만 데이터를 보여준다.

유저가 이 맛집을 선호하는지, 비선호하는지, 관심 없는지 무조건 1개 이상의 상태를 취해야만 계속 추천 데이터를 볼 수 있다.

 

즉 선호(Accepted), 비선호(Denied), 관심 없음(Kept) 3가지 중 1개의 상태를 취하면 그 상태를 post 해 서버에 현황을 보내주고, 추천 데이터는 1개가 줄어든 상태로 다시 받아와야 한다.

const response = await axiosInstance.post(
        `/api/v1/recommend`,
        { placeId: placeId, status: status },
        {
          headers: {
            Authorization: import.meta.env.VITE_TEST_TOKEN,
          },
        }
      );

      if (response.status === 200) {
        alert(`Recommendation ${status} successfully.`);
        queryClient.invalidateQueries('recommend');
        if (status === 'ACCEPTED') {
          navigate(`/${placeId}`);
        }
      }

 

이런 식으로 placeId와 status, 토큰을 가지고 post 요청을 보낸다.

정상적으로 상태가 전송되면 alert을 띄워주고 추천 데이터를 가져오는 쿼리를 무효화 한다.

이를 통해 무효화된 쿼리는 자동으로 재요청 되어 최신 데이터(1개의 상태를 제외한 갯수)를 가져온다.

 

그런데 쿼리 무효화는 커녕 에러 메세지가 발생했다.

Type 'recommend' has no properties in common with type 'InvalidateQueryFilters'.
타입 'recommend'에는 InvalidateQueryFilters와 공통된 속성이 없다.

 

이게 뭔소리야 했는데 나같은 사람이 대놓고 있었다.

 

Getting type error when using string to invalidate queries. · TanStack query · Discussion #5788

 

queryClient.invalidateQueries('recommend') ❌

queryClient.invalidateQueries( { queryKey: ['recommend'] } ); ✅

 

querykey는 배열로 전달해야 한다!

querykey는 배열로 전달해야 한다!

querykey는 배열로 전달해야 한다!

...

querykey는 배열로 전달해야 한다!!!