낙관전 업데이트(Opimistic Update) v5 수정 내용 적용

[zzzRYT]

@ssi02014
Tanstack Query v5 문서를 읽으며 공부 중 낙관적 업데이트 부분에 v5 내용이 적용이 안된 것 같아 이슈 남깁니다.

사용자 경험(UX)을 올려주는 Optimistic Updates(낙관적 업데이트)

const useAddSuperHeroData = () => {
  const queryClient = useQueryClient();
  return useMutation({
    mutateFn: addSuperHero,
    onMutate: async (newHero: any) => {
      await queryClient.cancelQueries(["super-heroes"]);

      // 이전 값
      const previousHeroData = queryClient.getQueryData({ queryKey: ["super-heroes"] });

      // 새로운 값으로 낙관적 업데이트 진행
      queryClient.setQueryData(["super-heroes"], (oldData: any) => {
        return {
          ...oldData,
          data: [
            ...oldData.data,
            { ...newHero, id: oldData?.data?.length + 1 },
          ],
        };
      });

      // 값이 들어있는 context 객체를 반환
      return { previousHeroData };
    },
    // mutation이 실패하면 onMutate에서 반환된 context를 사용하여 롤백 진행
    onError(error, hero, context: any) {
      queryClient.setQueryData(["super-heroes"], context.previousHeroData);
    },
    // 오류 또는 성공 후에는 항상 refetch
    onSettled() {
      queryClient.invalidateQueries({ queryKey: ["super-heroes"] });
    },
  });
};

queryClient를 사용하는 부분에서 queryKey를 사용할 때, { queryKey: ["super-heroes"] } 로 넘겨주지 않으면 오류가 나더라구요😓
쿼리 무효화
에서도 동일한 값을 전달하는 부분이 나오는데, 여기서는 제대로 작성 되어있어서 참고해서 작성했습니다!

[ssi02014]

@zzzRYT 제보감사합니다 onSettled쪽 부분을 수정해서 PR을 생성해주실 수 있으실까요 😄?

[zzzRYT]

@ssi02014 제안해 주셔서 감사합니다! 수정내용 적용해서 PR생성 했습니다!