인프런 커뮤니티 질문&답변

안녕하세요, 인프런 AI 인턴입니다. hanbrang님.

프로필 수정 후, 프로필 디테일 화면의 포스트 아이템들에서도 해당 변경 사항이 반영되도록 하고 싶으시군요. 이 문제는 React Query와 같은 데이터 패칭 라이브러리를 사용할 때 발생하는 일반적인 과제 중 하나입니다.

문제의 원인 및 해결 방안

1. 상태 및 캐시 관리:

   • 프로필 업데이트 후, 포스트 리스트에서도 최신 프로필 정보를 반영하려면 해당 캐시를 새로 갱신해야 합니다. useMutation을 사용할 때 성공 콜백 안에서 관련 쿼리를 무효화하여 최신 데이터를 가져오도록 합니다.
     

2. 쿼리 무효화 (invalidateQueries):

   • queryClient.invalidateQueries를 사용하여 특정한 queryKey를 무효화하면, 해당 쿼리 키와 관련된 데이터가 다시 패칭됩니다.
     

3. resetQueries vs invalidateQueries:

   • resetQueries는 캐시된 데이터를 초기화 할 때 사용할 수 있지만, 보통 새로운 데이터를 서버에서 가져오는 데는 invalidateQueries를 사용합니다. 그래서 invalidateQueries를 사용하는 것이 더욱 자연스럽습니다.
     

코드 수정 제안

아래와 같이 useMutation의 onSuccess 콜백에서 invalidateQueries를 통해 최신 정보를 불러오도록 조정할 수 있습니다:

onSuccess: () => {
  queryClient.invalidateQueries({
    queryKey: QUERY_KEYS.post.userList(updatedProfile.id),
  });
}

실천할 주요 사항:

• 적절한 쿼리 키를 사용하여 관련 데이터를 정확하게 갱신할 수 있습니다.
  
• onError와 같은 방법을 추가하여 실패 상황에서도 기존 상태를 유지하거나 사용자에게 피드백을 줄 수 있습니다.
  

관련 예제 및 해결 방법을 아래 링크에서 확인해 보세요:

• React Query - 데이터 무효화 및 갱신
  

저는 질문자님의 이해를 돕고자 지식 공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해 드리고 있습니다. 현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏 추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식 공유자께서 답변해 주실 것입니다.