[TIL] Optimistic + Infinite query

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 형식을 유지한 채 데이터를 변경하게 로직을 변경하니 좋아요를 눌렀을 때에도 기존 페이지가 유지되면서 목록이 그대로 생성되어 있었다.