Merge pull request #407 from ever-works/fix/Rating-in-item-detail

refactor: improve rating display sync and add SSR safety for custom events

Author: joel-kalema

hooks/use-comments.ts

@@ -16,6 +16,13 @@ interface UpdateCommentData {
   rating?: number;
 }
 
+const COMMENT_MUTATION_EVENT = "comment:mutated";
+
+const dispatchCommentEvent = (comment: CommentWithUser) => {
+  if (typeof window === "undefined") return;
+  window.dispatchEvent(new CustomEvent(COMMENT_MUTATION_EVENT, { detail: comment }));
+};
+
 export function useComments(itemId: string) {
   const queryClient = useQueryClient();
   const loginModal = useLoginModal();
@@ -53,7 +60,7 @@ export function useComments(itemId: string) {
       // response.data contains the API response: { success: true, comment: CommentWithUser }
       return response.data.comment;
     },
-    onSuccess: (newComment) => {
+    onSuccess: async (newComment) => {
       if (newComment) {
         // Optimistically update cache with server-returned comment data
         queryClient.setQueryData<CommentWithUser[]>(["comments", itemId], (old = []) => {
@@ -65,9 +72,9 @@ export function useComments(itemId: string) {
           // Add new comment at the beginning
           return [newComment, ...old];
         });
-        // Update rating caches to reflect new rating immediately
-        queryClient.setQueryData(["commentRating", itemId], newComment.rating);
-        queryClient.invalidateQueries({ queryKey: ["itemRating", itemId], exact: true });
+        dispatchCommentEvent(newComment);
+        // Force refetch rating query to show updated data immediately
+        await queryClient.refetchQueries({ queryKey: ["item-rating", itemId] });
       }
     },
   });
@@ -108,16 +115,17 @@ export function useComments(itemId: string) {
 
       return response.data;
     },
-    onSuccess: (updatedComment) => {
+    onSuccess: async (updatedComment) => {
       if (updatedComment) {
         // Optimistically update cache with server-returned comment data
         queryClient.setQueryData<CommentWithUser[]>(["comments", itemId], (old = []) => {
           return old.map(comment =>
             comment.id === updatedComment.id ? updatedComment : comment
           );
         });
-        // Invalidate rating caches to reflect updated rating
-        queryClient.invalidateQueries({ queryKey: ["itemRating", itemId], exact: true });
+        dispatchCommentEvent(updatedComment);
+        // Force refetch rating to reflect updated rating immediately
+        await queryClient.refetchQueries({ queryKey: ["item-rating", itemId] });
       }
     },
   });
@@ -137,9 +145,9 @@ export function useComments(itemId: string) {
 
       return response.data;
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: ["comments", itemId] });
-      queryClient.invalidateQueries({ queryKey: ["itemRating", itemId] });
+      await queryClient.refetchQueries({ queryKey: ["item-rating", itemId] });
     },
   });
 
@@ -158,9 +166,9 @@ export function useComments(itemId: string) {
 
       return response.data;
     },
-    onSuccess: () => {
+    onSuccess: async () => {
       queryClient.invalidateQueries({ queryKey: ["comments", itemId] });
-      queryClient.invalidateQueries({ queryKey: ["itemRating", itemId] });
+      await queryClient.refetchQueries({ queryKey: ["item-rating", itemId] });
     },
   });
 

hooks/use-item-rating.ts

@@ -8,29 +8,41 @@ interface RatingData {
   totalRatings: number;
 }
 
-export function useItemRating(itemId: string) {
+export function useItemRating(itemId: string, enabled: boolean = true) {
   const { features } = useFeatureFlagsWithSimulation();
 
   const {
     data: rating = { averageRating: 0, totalRatings: 0 },
     isLoading,
     error,
+    refetch,
   } = useQuery<RatingData>({
     queryKey: ["item-rating", itemId],
-    enabled: features.ratings, // Only fetch when ratings feature is enabled
-    queryFn: async () => {
+    enabled: features.ratings && enabled, // Only fetch when ratings feature is enabled
+    queryFn: async ({ signal }) => {
       const encodedItemId = encodeURIComponent(itemId);
-      const response = await serverClient.get<RatingData>(`/api/items/${encodedItemId}/comments/rating`);
+      // Avoid HTTP cache; rely on React Query invalidation for freshness
+      const response = await serverClient.get<RatingData>(`/api/items/${encodedItemId}/comments/rating`, {
+        cache: "no-store",
+        headers: { "Cache-Control": "no-store" },
+        signal,
+      });
       if (!apiUtils.isSuccess(response)) {
         throw new Error(apiUtils.getErrorMessage(response) || "Failed to fetch rating");
       }
       return response.data;
     },
+    // Use moderate defaults; mutations and explicit refetch handle immediates
+    staleTime: 5 * 60 * 1000, // 5 minutes
+    refetchOnMount: false,
+    refetchOnWindowFocus: false,
+    refetchOnReconnect: false,
   });
 
   return {
     rating,
     isLoading,
     error,
+    refetch,
   };
 }