Skip to content

fix: Add optimistic cache updates for tweet deletion and user actions #189

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
salehahmed99 merged 3 commits into from
Dec 16, 2025
Merged

fix: Add optimistic cache updates for tweet deletion and user actions #189

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
4b18356
feat: Add optimistic cache updates for tweet deletion and user action…
AbdallahAyman03 Dec 15, 2025
0370f67
Merge branch 'dev' into fix/Media-and-search-caching
AbdallahAyman03 Dec 16, 2025
d6c1aa6
fix: remove optimistic updates for deletions
salehahmed99 Dec 16, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
31 changes: 31 additions & 0 deletions src/modules/profile/hooks/useBlockUser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { IExploreResponse, IWhoToFollowResponse } from '../../explore/types';
import { ISearchUsersMappedPageData } from '../../search/types';
import { ITweet, ITweets } from '../../tweets/types';
import { blockUser, unblockUser } from '../services/profileService';
import { updateUserStateInTweetsCache } from '../utils/profileCacheUtils';
Expand Down Expand Up @@ -53,6 +54,29 @@ export const useBlockUser = (initialBlockState: boolean = false) => {
};
};

// Helper to remove user from searchUsers cache
const removeFromSearchUsersCache = (
oldData: InfiniteData<ISearchUsersMappedPageData> | undefined,
userId: string,
): InfiniteData<ISearchUsersMappedPageData> | undefined => {
if (!oldData?.pages) return oldData;

return {
...oldData,
pages: oldData.pages.map((page) => {
if (!page?.data?.data) return page;

return {
...page,
data: {
...page.data,
data: page.data.data.filter((user) => user.id !== userId),
},
};
}),
};
};

const blockMutation = useMutation({
mutationFn: async (variables: BlockMutationVariables) => {
return variables.isBlocked ? unblockUser(variables.userId) : blockUser(variables.userId);
Expand All @@ -63,6 +87,7 @@ export const useBlockUser = (initialBlockState: boolean = false) => {
await queryClient.cancelQueries({ queryKey: ['tweets'] });
await queryClient.cancelQueries({ queryKey: ['explore', 'forYou'] });
await queryClient.cancelQueries({ queryKey: ['whoToFollow'] });
await queryClient.cancelQueries({ queryKey: ['searchUsers'] });

setIsBlocked(!variables.isBlocked);

Expand All @@ -84,6 +109,11 @@ export const useBlockUser = (initialBlockState: boolean = false) => {
queryClient.setQueriesData<IWhoToFollowResponse>({ queryKey: ['whoToFollow'] }, (oldData) =>
removeFromWhoToFollowCache(oldData, variables.userId),
);

// Remove blocked user from search users cache
queryClient.setQueriesData<InfiniteData<ISearchUsersMappedPageData>>({ queryKey: ['searchUsers'] }, (oldData) =>
removeFromSearchUsersCache(oldData, variables.userId),
);
}
},
onSuccess: (data, variables) => {
Expand All @@ -99,6 +129,7 @@ export const useBlockUser = (initialBlockState: boolean = false) => {
queryClient.invalidateQueries({ queryKey: ['userList'] });
queryClient.invalidateQueries({ queryKey: ['explore', 'forYou'] });
queryClient.invalidateQueries({ queryKey: ['whoToFollow'] });
queryClient.invalidateQueries({ queryKey: ['searchUsers'] });
},
});

Expand Down
34 changes: 34 additions & 0 deletions src/modules/profile/hooks/useFollowUser.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import { useAuthStore } from '@/src/store/useAuthStore';
import { InfiniteData, useMutation, useQueryClient } from '@tanstack/react-query';
import { useState } from 'react';
import { IExploreResponse, IWhoToFollowResponse } from '../../explore/types';
import { ISearchUsersMappedPageData } from '../../search/types';
import { ITweet, ITweets } from '../../tweets/types';
import { followUser, unfollowUser } from '../services/profileService';
import { updateUserStateInTweetsCache } from '../utils/profileCacheUtils';
Expand Down Expand Up @@ -66,6 +67,32 @@ export const useFollowUser = (initialFollowState: boolean = false): UseFollowUse
};
};

// Helper to update searchUsers cache
const updateSearchUsersCache = (
oldData: InfiniteData<ISearchUsersMappedPageData> | undefined,
userId: string,
newFollowingState: boolean,
): InfiniteData<ISearchUsersMappedPageData> | undefined => {
if (!oldData?.pages) return oldData;

return {
...oldData,
pages: oldData.pages.map((page) => {
if (!page?.data?.data) return page;

return {
...page,
data: {
...page.data,
data: page.data.data.map((user) =>
user.id === userId ? { ...user, isFollowing: newFollowingState } : user,
),
},
};
}),
};
};

const followMutation = useMutation({
mutationFn: async (variables: FollowMutationVariables) => {
return variables.isFollowing ? unfollowUser(variables.userId) : followUser(variables.userId);
Expand All @@ -78,6 +105,7 @@ export const useFollowUser = (initialFollowState: boolean = false): UseFollowUse
await queryClient.cancelQueries({ queryKey: ['following'] });
await queryClient.cancelQueries({ queryKey: ['explore', 'forYou'] });
await queryClient.cancelQueries({ queryKey: ['whoToFollow'] });
await queryClient.cancelQueries({ queryKey: ['searchUsers'] });

setIsFollowing(!variables.isFollowing);

Expand All @@ -98,6 +126,11 @@ export const useFollowUser = (initialFollowState: boolean = false): UseFollowUse
queryClient.setQueriesData<IWhoToFollowResponse>({ queryKey: ['whoToFollow'] }, (oldData) =>
updateWhoToFollowCache(oldData, variables.userId, !variables.isFollowing),
);

// Update search users cache
queryClient.setQueriesData<InfiniteData<ISearchUsersMappedPageData>>({ queryKey: ['searchUsers'] }, (oldData) =>
updateSearchUsersCache(oldData, variables.userId, !variables.isFollowing),
);
},
onSuccess: async (data, variables) => {
// Update own following count optimistically
Expand All @@ -119,6 +152,7 @@ export const useFollowUser = (initialFollowState: boolean = false): UseFollowUse
queryClient.invalidateQueries({ queryKey: ['userList'] });
queryClient.invalidateQueries({ queryKey: ['explore', 'forYou'] });
queryClient.invalidateQueries({ queryKey: ['whoToFollow'] });
queryClient.invalidateQueries({ queryKey: ['searchUsers'] });
},
});

Expand Down
13 changes: 13 additions & 0 deletions src/modules/search/types/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,19 @@ export interface ISearchUsersResponse {
message: string;
}

// Type for the mapped search users page (after mapSearchUserToUser is applied)
export interface ISearchUsersMappedPageData {
data: {
data: IUser[];
pagination: {
nextCursor: string | null;
hasMore: boolean;
};
};
count: number;
message: string;
}

// Search Query Params
export interface ISearchSuggestionsParams {
query: string;
Expand Down
Loading
Loading