인프런 커뮤니티 질문&답변

댓글, 재게시 기능 개발시 onSuccess 메서드 사용 부분에서 궁금한 점이 생겨 질문 드립니다.
로직은 비슷해서 재게시 로직 첨부했습니다!!
좋아요 기능과 마찬가지로 optimistic update 방식으로 보다 빠른 UI 변경을 보기 위해 사용하는건지 궁금합니다.

강의를 수강하다가 onMutate, onSuccess 메서드에서 optimistic update 방식이 혼재 되있어 댓글, 재게시 기능들은 onSuccess 함수에 invalidateQueries 메서드를 활용해 쿼리 상태를 최신으로 다시 가져오는 방식은 괜찮지 않을까, 또 제로초님 의견은 어떠신지 궁금점이 들어 질문 드립니다!!

async onSuccess(response) {
      const newPost = await response.json();
      setContent("");
      setPreview([]);
      const queryCache = queryClient.getQueryCache();
      const queryKeys = queryCache.getAll().map((cache) => cache.queryKey);

      queryKeys.forEach((queryKey) => {
        if (queryKey[0] === "posts") {
          const value: Post | InfiniteData<Post[]> | undefined =
            queryClient.getQueryData(queryKey);
          if (value && "pages" in value) {
            const obj = value.pages
              .flat()
              .find((v) => v.postId === parent?.postId);
            if (obj) {
              // 존재는 하는지
              const pageIndex = value.pages.findIndex((page) =>
                page.includes(obj)
              );
              const index = value.pages[pageIndex].findIndex(
                (v) => v.postId === parent?.postId
              );

              const shallow = { ...value };
              value.pages = { ...value.pages };
              value.pages[pageIndex] = [...value.pages[pageIndex]];
              shallow.pages[pageIndex][index] = {
                ...shallow.pages[pageIndex][index],
                Comments: [{ userId: me?.user?.email as string }],
                _count: {
                  ...shallow.pages[pageIndex][index]._count,
                  Comments: shallow.pages[pageIndex][index]._count.Comments + 1,
                },
              };
              shallow.pages[0].unshift(newPost); // 새 답글 추가
              queryClient.setQueryData(queryKey, shallow);
            }
          } else if (value) {
            // 싱글 포스트인 경우
            if (value.postId === parent?.postId) {
              const shallow = {
                ...value,
                Comments: [{ userId: me?.user?.email as string }],
                _count: {
                  ...value._count,
                  Comments: value._count.Comments + 1,
                },
              };
              queryClient.setQueryData(queryKey, shallow);
            }
          }
        }
      });
      await queryClient.invalidateQueries({
        queryKey: ["trends"],
      });

// or 

  async onSuccess() {
      console.log(queryClient.getQueryCache().getAll());
      await Promise.all([
        queryClient.invalidateQueries({
          queryKey: ["posts", String(post?.postId)],
        }),
        queryClient.invalidateQueries({
          queryKey: ["posts", String(post?.postId), "comments"],
        }),
      ]);
    },
    },