[트러블슈팅] 댓글 작성 후 리스트 반영이 안될 때

커뮤니티 게시판 기능을 만들고 있었는데, 댓글 작성 후에 바로 리스트에 반영이 안되는 문제가 있었다.
분명 댓글은 정상적으로 올라가는데, 새로고침을 하기 전까지는 리스트의 댓글 개수가 그대로였다.

문제 상황

리스트 화면에서 댓글 수를 이렇게 불러오고 있었다.

final countFuture = _commentCountFutures.putIfAbsent(
  x.id,
  () => ref.read(getCommentCountProvider).call(x.id),
);

그리고 아래처럼 FutureBuilder로 감싸서 표시했다.

FutureBuilder(
  future: countFuture,
  builder: (_, snap) {
    if (snap.connectionState == ConnectionState.waiting) {
      return const SizedBox(
        width: 14,
        height: 14,
        child: CircularProgressIndicator(strokeWidth: 2),
      );
    }
    final c = snap.data ?? 0;
    return Text('$c');
  },
);

댓글 작성이 끝나면

ref.read(communityChangedTickProvider.notifier).state++;

이 코드를 통해 리스트를 새로고침하도록 해놨는데, 아무 반응이 없었다.

원인

원인은 _commentCountFutures였다.
이 맵이 댓글 개수를 가져오는 Future를 한 번만 생성해서 캐시로 들고 있었기 때문이다.

즉, 댓글을 새로 달아도 기존 Future가 그대로 남아 있어서 FutureBuilder는 다시 빌드되지 않았다.
communityChangedTickProvider가 갱신돼도 Future는 그대로니까, 아무 일도 일어나지 않았던 것이다.

해결 과정

이 문제를 해결하기 위해 두 가지 방법을 고민했다.

1. 댓글이 달릴 때 캐시를 지우고 다시 Future를 불러오는 방식
2. 댓글 수를 Provider 기반으로 바꿔서 자동으로 리빌드되게 하는 방식

결국 두 번째 방법으로 해결했다.

---

해결 코드

먼저, 댓글 수를 관리할 프로바이더를 새로 정의했다.
이 프로바이더는 communityChangedTickProvider의 상태 변화를 감지해서 자동으로 새로고침된다.

final commentCountByPostProvider =
    FutureProvider.family<int, String>((ref, postId) {
  ref.watch(communityChangedTickProvider);
  return ref.read(getCommentCountProvider).call(postId);
});

그리고 리스트 화면의 FutureBuilder 부분을 이렇게 바꿨다.

final countAv = ref.watch(commentCountByPostProvider(x.id));
Widget commentCount = countAv.when(
  data: (c) => Text('$c'),
  loading: () => const SizedBox(
    width: 14, height: 14,
    child: CircularProgressIndicator(strokeWidth: 2),
  ),
  error: (_, __) => const Text('0'),
);

아이콘 옆에 commentCount를 바로 배치했다.

const Icon(Icons.mode_comment_outlined, size: 18),
const SizedBox(width: 4),
commentCount,

이제 댓글 작성 후 communityChangedTickProvider 값이 증가하면
자동으로 commentCountByPostProvider가 다시 빌드되고
댓글 수가 바로 반영된다.

---

결과

• 댓글 작성 후 바로 댓글 개수가 업데이트됨
• 별도의 새로고침 없이 UI 자동 반영
• 캐시와 FutureBuilder 문제 깔끔히 정리

이전에는 리스트 전체를 invalidate 시켜야 해서 낭비가 많았는데,
이 방식은 댓글 수만 부분적으로 갱신돼서 효율적이다.

리버팟에서는 Future 캐시를 직접 들고 있으면 변화 감지가 어렵다.
이럴 땐 Provider의 의존성(ref.watch)을 활용해서 변화 신호를 감지하는 게 훨씬 낫다.
결국 상태는 한 곳에서 관리되고, 뷰는 변화에만 반응하게 된다.