🐛 [Bug] 찜하기 동작 에러

[cloud0406]

#️⃣연관된 이슈

ex) #289, #292

📝작업 내용

찜하기 버그 수정 (찜하기시 유저 프로필 페이지에 반영 안되는 문제)

현재 찜하기쪽에서 발생하는 버그가 크게 다음 2가지 입니다.

1. 찜하기, 찜해제가 2번씩 눌러야 동작함
2. 유저 프로필 페이지에서 찜하기 이후 새로고침해야 하트 반영됨

1번 내용은 @wynter24 님이 작성해주신 #292 이슈 확인하면 될 것 같습니다!
해당 이슈에서 낙관적 업데이트 처리를 해주고 있기 때문에 찜하기/찜해제 동작이 바로 반영이 될 수 있을 것 같습니다.
(조회 쿼리를 state로 관리하고 Props로 내려주고 있는 로직은 발표 이후 개선해보면 좋을 것 같습니다!)

2번은 해당 페이지에서 사용되는 쿼리가 찜하기/찜해제시 무효화되지 않고 있었습니다.
찜하기/찜해제시에는 bookclub관련 정보들이 전체적으로 많이 바뀌어야하기 때문에 bookclub 쿼리 전체를 무효화하도록 수정했습니다.

수정 전에는 찜을 안한 상태에서 찜하기를 실행하면 계속 찜이되지않고 찜하기만 무한으로 반복되고 있었는데,
수정 후 찜하기, 찜해제 모두 2번씩 누르면 동작하는 것 확인했습니다. (이 부분은 민경님이 작성해주신 pr과 합치면 같이 해결될 부분인 것 같습니다!)

+++추가 사항 (중요)

@wynter24 #293 님이 올려주신 Pr 머지 후, 테스트해봤는데 추후에 수정작업이 필요합니다! 우선 해당 pr에서 filters 부분이 빠져야할 것 같습니다! (해당 필터를 가진 쿼리키만 무효화하게 됨)

const listQueryKey = bookClubs.list(DEFAULT_FILTERS).queryKey;

또한, 낙관적 업데이트를 위해 setQueryData 적용시 주의할 점이 있습니다

쿼리키 인식 방식의 주요 차이점입니다

// setQueryData: exact matching (정확히 일치해야 함)
queryClient.setQueryData(['bookclubs', 'list', { page: 1 }], newData) // ⭕
queryClient.setQueryData(['bookclubs', 'list'], newData) // ❌ 동작 안함

// invalidateQueries: prefix matching (부분 일치 가능)
queryClient.invalidateQueries(['bookclubs', 'list']) // ⭕ 모든 list 쿼리 무효화
queryClient.invalidateQueries(['bookclubs']) // ⭕ bookclubs로 시작하는 모든 쿼리 무효화

따라서:

• 낙관적 업데이트(setQueryData): 정확한 쿼리키 필요
• 쿼리 무효화(invalidateQueries): 부분 쿼리키로도 가능

이 부분 때문에 낙관적 업데이트 적용을 위해서는 정확한 쿼리키 입력이 필요합니다!

현재 찜하기, 찜해제 동작을 임시적으로 동작하게는 해두었으나 추후 전체적으로 로직을 바꿔야할 것 같습니다.

---

기타 참고사항

현태님이 유저 북클럽쪽 경로를 수정해주셔서 이에따라 경로 변경 작업이 들어간 점 참고 부탁드립니다!

/유저가 참가한 북클럽 조회
  userJoined: async (userId: number, params?: MyProfileParams) => {
    const response = await apiClient.get(`/book-clubs/users/${userId}/joined`, {
      params,
    });
    return response.data;
  },

  //유저가 만든 북클럽 조회
  userCreated: async (userId: number, params?: MyProfileParams) => {
    const response = await apiClient.get(
      `/book-clubs/users/${userId}/created`,
      {
        params,
      },
    );
    return response.data;
  },

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
bookco	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Jan 5, 2025 6:43am

[wynter24]

수고하셨습니다!