[TanStack Query] 재호출된 useQuery의 반환 값으로 리렌더링이 안 될 때

useQuery로 프로필 데이터를 가져온 뒤 useMutate를 사용해 프로필 이미지를 업데이트했을 때 프로필 이미지가 변경되지 않는 이슈를 발견했다.

 

const queryClient = useQueryClient();

// 프로필 데이터 GET useQuery
const { data: profile } = useQuery(); 
// 프로필 이미지 수정 useMutate
const { mutate: usePostProfileMutate } = useMutate(); 

// 프로필 수정 핸들러
const handleUpdateProfile = () => {
  usePostProfileMutate(imageFile, {
    onSuccess: () => queryClient.invalidateQueries(["프로필 쿼리"]);    
  })
}

<Image src={profile.profileSrc} />

대략적인 로직은 위의 코드와 비슷하다.

 

내가 생각하는 순서는 아래와 같다.

1. useQuery를 사용해서 profile 데이터를 가져오며, profile의 profileSrc를 Image 태그의 src로 사용한다.

2. handleUpdateProfile를 사용해 프로필을 업데이트를 하고 성공했을 때 queryClient.invalidateQueries로 프로필 쿼리를 무효화한다.

3. 프로필 쿼리가 무효화 됨으로써 다시 useQuery를 통해 profile 데이터를 가져온다.

 

하지만 프로필 이미지를 수정해도 바로 이미지가 업데이트가 되지 않았다.

원인을 찾던 중 서버에서 반환해주는 프로필 이미지 주소가 각 유저마다 고정 값으로 반환해 주는 것을 발견했다.

 

아마 프로필 이미지가 변경되지 않는 이유가 서버에서 반환해 주는 이미지의 주소 값이 동일해서 컴포넌트가 리렌더링이 되지 않는 것으로 추측하고 있다. 

 

해결 방법으로 생각한 것은 총 2가지의 방법을 찾았다.

1. 프로필 이미지를 서버에 저장할 때 주소 값을 변경해서 반환하는 방법 (서버 수정)

2. 동일한 프로필 이미지 주소 값을 반환받아서 프론트에서 값의 변화를 감지해서 리렌더링 시키는 방법 (프론트 수정)

 

1번은 추가적으로 서버 개발자의 작업이 필요한 상황이고, 다음 업데이트가 되기 전까지 해당 기능을 마무리 하고 싶어서 2번을 택했다.

 

const queryClient = useQueryClient();

// 프로필 데이터 GET useQuery
const { data: profile, isFetching } = useQuery(); 
// 프로필 이미지 수정 useMutate
const { mutate: usePostProfileMutate } = useMutate(); 

// 이미지 주소를 변경할 값
const [profileUpdateCount, setProfileUpdateCount] = useState(0); 

// 프로필 수정 핸들러
const handleUpdateProfile = () => {
  usePostProfileMutate(imageFile, {
    onSuccess: () => queryClient.invalidateQueries(["프로필 쿼리"]);    
  })
}

useEffect(() => {
  // 프로필 데이터를 fetching 할 때 마다 +1 한다.
  setProfileUpdateCount(profileUpdateCount + 1);
}, [isFetching)

<Image src={`${profile.profile_image}?v=${profileUpdateCount}`} />

 

이렇게 이미지 주소를 변경해 주니 원하는 대로 리렌더링이 잘 되었다. 정말 별거 아닌 수정 방법이지만 해결하기 위해서 꼬박 반나절은 걸린 것 같다.

 

이 해결법과 관련해서 TanStack Query에도 질문을 올려두었는데 답변이 달리길 기다리고 있다. 답변이 작성된다면 그것에 맞춰 다시 글을 수정해야겠다.