fix: likers & retweeters cache update - [CU-869bcu3fq]

src/__tests__/hooks/profile/useFollowMutation.test.tsx

@@ -277,8 +277,22 @@ describe('useFollowMutation', () => {
       pages: [
         {
           data: [
-            { username: 'targetUser', displayName: 'Target User', isFollowing: false },
-            { username: 'otherUser', displayName: 'Other User', isFollowing: true },
+            {
+              username: 'targetUser',
+              displayName: 'Target User',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: false },
+            },
+            {
+              username: 'otherUser',
+              displayName: 'Other User',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: true },
+            },
           ],
           nextCursor: undefined,
         },
@@ -299,8 +313,8 @@ describe('useFollowMutation', () => {
       'tweetLikers',
       'tweet-123',
     ]) as typeof likersData;
-    expect(updatedLikers.pages[0].data[0].isFollowing).toBe(true);
-    expect(updatedLikers.pages[0].data[1].isFollowing).toBe(true); // unchanged
+    expect(updatedLikers.pages[0].data[0].relationship?.following).toBe(true);
+    expect(updatedLikers.pages[0].data[1].relationship?.following).toBe(true); // unchanged
   });
 
   it('updates tweetRetweeters cache when following a user', async () => {
@@ -322,8 +336,22 @@ describe('useFollowMutation', () => {
       pages: [
         {
           data: [
-            { username: 'retweeter', displayName: 'Retweeter', isFollowing: false },
-            { username: 'anotherUser', displayName: 'Another', isFollowing: false },
+            {
+              username: 'retweeter',
+              displayName: 'Retweeter',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: false },
+            },
+            {
+              username: 'anotherUser',
+              displayName: 'Another',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: false },
+            },
           ],
           nextCursor: undefined,
         },
@@ -344,8 +372,8 @@ describe('useFollowMutation', () => {
       'tweetRetweeters',
       'tweet-456',
     ]) as typeof retweetersData;
-    expect(updatedRetweeters.pages[0].data[0].isFollowing).toBe(true);
-    expect(updatedRetweeters.pages[0].data[1].isFollowing).toBe(false);
+    expect(updatedRetweeters.pages[0].data[0].relationship?.following).toBe(true);
+    expect(updatedRetweeters.pages[0].data[1].relationship?.following).toBe(false);
   });
 
   it('creates default relationship when target profile has no relationship', async () => {
@@ -446,7 +474,16 @@ describe('useFollowMutation', () => {
     const likersData = {
       pages: [
         {
-          data: [{ username: 'targetUser', displayName: 'Target', isFollowing: false }],
+          data: [
+            {
+              username: 'targetUser',
+              displayName: 'Target',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: false },
+            },
+          ],
           nextCursor: undefined,
         },
       ],
@@ -457,7 +494,16 @@ describe('useFollowMutation', () => {
     const retweetersData = {
       pages: [
         {
-          data: [{ username: 'targetUser', displayName: 'Target', isFollowing: false }],
+          data: [
+            {
+              username: 'targetUser',
+              displayName: 'Target',
+              bio: null,
+              avatarUrl: null,
+              bioEntities: null,
+              relationship: { ...rel, following: false },
+            },
+          ],
           nextCursor: undefined,
         },
       ],
@@ -484,8 +530,8 @@ describe('useFollowMutation', () => {
       'tweet-789',
     ]) as typeof retweetersData;
 
-    expect(revertedLikers.pages[0].data[0].isFollowing).toBe(false);
-    expect(revertedRetweeters.pages[0].data[0].isFollowing).toBe(false);
+    expect(revertedLikers.pages[0].data[0].relationship?.following).toBe(false);
+    expect(revertedRetweeters.pages[0].data[0].relationship?.following).toBe(false);
   });
 
   it('handles mutation without target profile in cache', async () => {

src/__tests__/screens/tweets/TweetDetailScreen.test.tsx

@@ -561,7 +561,9 @@ describe('TweetDetailScreen', () => {
         });
       });
 
-      expect(input.props.value).toBe('');
+      await waitFor(() => {
+        expect(input.props.value).toBe('');
+      });
     });
 
     it('should show error if reply fails', async () => {

src/hooks/profile/useBlockMutation.tsx

@@ -1,8 +1,10 @@
 import { InfiniteData, QueryClient, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { ApiException, ApiResponseBase } from '@/libs/api';
+import { queryKeys } from '@/libs/queryKeys';
 import { blockUser, unblockUser } from '@/services/me';
 import { ListResponse } from '@/services/settings';
+import { GetTweetLikesResponse, GetTweetRetweetersResponse } from '@/services/tweets';
 import { useUserStore } from '@/stores/userStore';
 import { UserProfile } from '@/types/user';
 import { updateSearchUsersCache } from '@/utils/updateSearchCache';
@@ -21,11 +23,13 @@ export type BlockMutationContext = {
 };
 
 type InfiniteListResponse = InfiniteData<ListResponse, string | undefined>;
+type TweetLikersInfiniteResponse = InfiniteData<GetTweetLikesResponse, string | undefined>;
+type TweetRetweetersInfiniteResponse = InfiniteData<GetTweetRetweetersResponse, string | undefined>;
 
 function updateLists(queryClient: QueryClient, username: string, isBlocked: boolean) {
-  const queryKeys: ('blocks' | 'mutes')[] = ['blocks', 'mutes'];
+  const listKeys: ('blocks' | 'mutes')[] = ['blocks', 'mutes'];
 
-  for (const key of queryKeys) {
+  for (const key of listKeys) {
     const queries = queryClient.getQueriesData<InfiniteListResponse>({
       queryKey: [key],
     });
@@ -55,6 +59,66 @@ function updateLists(queryClient: QueryClient, username: string, isBlocked: bool
   }
 }
 
+function updateTweetLikersAndRetweetersLists(
+  queryClient: QueryClient,
+  username: string,
+  isBlocked: boolean
+) {
+  const likersQueries = queryClient.getQueriesData<TweetLikersInfiniteResponse>({
+    predicate: (query) => query.queryKey[0] === queryKeys.tweetLikers('')[0],
+  });
+
+  likersQueries.forEach(([queryKey, data]) => {
+    if (!data) return;
+
+    const pages = data.pages.map((page) => ({
+      ...page,
+      data: page.data.map((user) =>
+        user.username === username
+          ? {
+              ...user,
+              relationship: {
+                ...user.relationship,
+                blocking: isBlocked,
+                follower: isBlocked ? false : user.relationship?.follower,
+                following: isBlocked ? false : user.relationship?.following,
+              },
+            }
+          : user
+      ),
+    }));
+
+    queryClient.setQueryData(queryKey, { ...data, pages });
+  });
+
+  const retweetersQueries = queryClient.getQueriesData<TweetRetweetersInfiniteResponse>({
+    predicate: (query) => query.queryKey[0] === queryKeys.tweetRetweeters('')[0],
+  });
+
+  retweetersQueries.forEach(([queryKey, data]) => {
+    if (!data) return;
+
+    const pages = data.pages.map((page) => ({
+      ...page,
+      data: page.data.map((user) =>
+        user.username === username
+          ? {
+              ...user,
+              relationship: {
+                ...user.relationship,
+                blocking: isBlocked,
+                follower: isBlocked ? false : user.relationship?.follower,
+                following: isBlocked ? false : user.relationship?.following,
+              },
+            }
+          : user
+      ),
+    }));
+
+    queryClient.setQueryData(queryKey, { ...data, pages });
+  });
+}
+
 export function useBlockMutation() {
   const queryClient = useQueryClient();
   const updateUser = useUserStore((state) => state.updateUser);
@@ -110,6 +174,7 @@ export function useBlockMutation() {
             });
 
             updateLists(queryClient, username, block);
+            updateTweetLikersAndRetweetersLists(queryClient, username, block);
 
             updateUser({
               followersCount: newViewerFollowersCount,

src/hooks/profile/useFollowMutation.ts

@@ -1,6 +1,7 @@
 import { InfiniteData, QueryClient, useMutation, useQueryClient } from '@tanstack/react-query';
 
 import { ApiException } from '@/libs/api';
+import { queryKeys } from '@/libs/queryKeys';
 import { followUser, unfollowUser } from '@/services/connections';
 import { GetTweetLikesResponse, GetTweetRetweetersResponse } from '@/services/tweets';
 import { useUserStore } from '@/stores/userStore';
@@ -77,30 +78,50 @@ function updateTweetLikersAndRetweetersLists(
   isFollowing: boolean
 ) {
   const likersQueries = queryClient.getQueriesData<TweetLikersInfiniteResponse>({
-    queryKey: ['tweetLikers'],
+    predicate: (query) => query.queryKey[0] === queryKeys.tweetLikers('')[0],
   });
 
   likersQueries.forEach(([queryKey, data]) => {
     if (!data) return;
 
     const pages = data.pages.map((page) => ({
       ...page,
-      data: page.data.map((user) => (user.username === username ? { ...user, isFollowing } : user)),
+      data: page.data.map((user) =>
+        user.username === username
+          ? {
+              ...user,
+              relationship: {
+                ...user.relationship,
+                following: isFollowing,
+              },
+            }
+          : user
+      ),
     }));
 
     queryClient.setQueryData(queryKey, { ...data, pages });
   });
 
   const retweetersQueries = queryClient.getQueriesData<TweetRetweetersInfiniteResponse>({
-    queryKey: ['tweetRetweeters'],
+    predicate: (query) => query.queryKey[0] === queryKeys.tweetRetweeters('')[0],
   });
 
   retweetersQueries.forEach(([queryKey, data]) => {
     if (!data) return;
 
     const pages = data.pages.map((page) => ({
       ...page,
-      data: page.data.map((user) => (user.username === username ? { ...user, isFollowing } : user)),
+      data: page.data.map((user) =>
+        user.username === username
+          ? {
+              ...user,
+              relationship: {
+                ...user.relationship,
+                following: isFollowing,
+              },
+            }
+          : user
+      ),
     }));
 
     queryClient.setQueryData(queryKey, { ...data, pages });

src/hooks/tweets/useTweetLikers.ts

@@ -1,10 +1,11 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
+import { queryKeys } from '@/libs/queryKeys';
 import { getTweetLikes } from '@/services/tweets';
 
 export const useTweetLikers = (tweetId: string) => {
   return useInfiniteQuery({
-    queryKey: ['tweetLikers', tweetId],
+    queryKey: queryKeys.tweetLikers(tweetId),
     queryFn: ({ pageParam }) =>
       getTweetLikes(tweetId, pageParam ? { cursor: pageParam } : undefined),
     initialPageParam: undefined as string | undefined,

src/hooks/tweets/useTweetRetweeters.ts

@@ -1,10 +1,11 @@
 import { useInfiniteQuery } from '@tanstack/react-query';
 
+import { queryKeys } from '@/libs/queryKeys';
 import { getTweetRetweeters } from '@/services/tweets';
 
 export const useTweetRetweeters = (tweetId: string) => {
   return useInfiniteQuery({
-    queryKey: ['tweetRetweeters', tweetId],
+    queryKey: queryKeys.tweetRetweeters(tweetId),
     queryFn: ({ pageParam }) =>
       getTweetRetweeters(tweetId, pageParam ? { cursor: pageParam } : undefined),
     initialPageParam: undefined as string | undefined,

src/libs/queryKeys.ts

@@ -8,8 +8,8 @@ export const queryKeys = {
       ? (['tweet', tweetId, 'replies', cursor] as const)
       : (['tweet', tweetId, 'replies'] as const),
   tweetQuotes: (tweetId: string) => ['tweet', tweetId, 'quotes'] as const,
-  tweetLikers: (tweetId: string) => ['tweet', tweetId, 'likers'] as const,
-  tweetRetweeters: (tweetId: string) => ['tweet', tweetId, 'retweeters'] as const,
+  tweetLikers: (tweetId: string) => ['tweetLikers', tweetId] as const,
+  tweetRetweeters: (tweetId: string) => ['tweetRetweeters', tweetId] as const,
 
   timeline: {
     forYou: (username: string) => ['timeline', 'for-you', username] as const,