Cộng đồng Hỏi & Đáp của Inflearn

안녕하세요 hanbrang님 이정환입니다.

넵 요렇게 처리하시면 프로필이 변경된 유저가 작성한 PostItem에도 변경된 프로필이 잘 적용될 것 같습니다! 깔끔하네요 😀

그러나 resetQueries 보다는 invalidateQueries 사용을 더 권장드립니다.

아마 강의 중 use-create-post.ts 파일에서 resetQueries 메서드를 사용했었기 때문에 동일하게 사용하신걸로 보이는데요, 이때는 무한스크롤 피드의 데이터 자체를 모두 초기화 해야 했기 때문에 resetQueries를 예외적으로 사용했습니다.

따라서 이번처럼 단순 재 호출만 필요한 쿼리가 있다면 resetQueries 보다는 invalidateQueries 사용을 추천드립니다.

안녕하세요, 인프런 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 - 데이터 무효화 및 갱신
  

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