🤍 전 강의 25% 할인 중 🤍

2024년 상반기를 돌아보고 하반기에도 함께 성장해요!
인프런이 준비한 25% 할인 받으러 가기 >>

  • 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    해결됨

데이터 리페칭 질문이 있습니다.

24.05.20 13:34 작성 조회수 89

0

안녕하세요 제로초님 강의를 듣던 중 궁금한 것이 있어서 여쭈어 봅니다.

 

강의에서는 데이터를 mutation으로 리페칭 후

if (queryClient.getQueryData(["posts", "recommends"])) {
        queryClient.setQueryData(
          ["posts", "recommends"],
          (prevData: { pages: Post[][] }) => {
            const shallow = {
              ...prevData,
              pages: [...prevData.pages],
            };
            shallow.pages[0] = [...shallow.pages[0]];
            shallow.pages[0].unshift(newPost);
            return shallow;
          }
        );
      }

이런 식으로 데이터를 업데이트 해주었는데, 이 부분을 아래와 같이

queryClient.invalidateQueries({ queryKey: ["posts", "recommends"] });


이런 식으로 업데이트를 하면 어떤 차이점이 있나요 ??

데이터 업데이트시 쿼리를 업데이트 하고 리페칭하는 동작은 같은 것 같은데, 강의에서와 같이 복잡한 데이터 구조를 복사 해가며 구현하는 이유가 궁금합니다.
성능상의 차이가 있는 것인가요 ??

 

답변 1

답변을 작성해보세요.

0

invalidateQueries를 하면 데이터 전체를 새로 가져오는 것이고,

setQueryData 방식으로 하면 데이터 하나를 나머지 캐시에 있는 데이터들에 끼워넣는 것입니다.

invalidateQueries가 당연히 데이터 낭비이죠.

채널톡 아이콘