Optimistic Update + Infinite Query 구현
프로젝트 진행 중 tanstack-Query의 Optimistic update
를 사용하여 좋아요를 구현했으나, 리패칭되면서 Infinite Query
기능의 유지가 되지않고 사라졌다.
개발자 툴을 보면 pages에 배열형태로 데이터가 저장되어있는 것을 볼 수 있다.
그러나
const ideaData = data?.pages?.map(pageData => pageData.result).flat();
위와 같은 식으로 모든 페이지를 나열해서 수정을 하다 보니 invalidateQueries와 캐싱된 data형태가 달라서 업데이트가 아닌 새로 패칭을 진행하는 것이였다.
const newPages = prevIdeaInfinite?.pages?.map(arr => {
return {
...arr,
result: arr.result.map(item => {
if (item.post_id === post_id) {
return { ...item, liked_users: newLikedUsers };
}
return item;
}),
};
});
이후 위와 같이 query Data 형식을 유지한 채 데이터를 변경하게 로직을 변경하니 좋아요를 눌렀을 때에도 기존 페이지가 유지되면서 목록이 그대로 생성되어 있었다.