how to update cache after mutation
I have a component that list a list of users and showing follow status such as "follow, following, follow back", how to update the cache after mutating
export function SearchWrapper() {
const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 300);
const { data: usersList, error, isFetching } = useQuery({
queryKey: ['searchUsers', debouncedSearchTerm],
queryFn: () => fetchUsers(debouncedSearchTerm),
enabled: !!debouncedSearchTerm,
staleTime: 5000
});
const handleInputChange = (e) => {
setSearchTerm(e.target.value)
}
<Input
type="text"
placeholder="Search"
value={searchTerm}
onChange={handleInputChange}
/>
</div>
<UserSearchList debouncedSearchTerm={debouncedSearchTerm} usersList={usersList} />
const UserSeachList component
<FollowStatusButton
debouncedSearchTerm={debouncedSearchTerm}
usersWithFollowStatus={userWithFollowStatus}
/>
export function FollowStatusButton({ usersWithFollowStatus, debouncedSearchTerm }) {
const queryClient = useQueryClient();
const followMutation = useMutation({
mutationFn: async (userId) => {
await followUser(userId);
},
onMutate: async (userId) => {
await queryClient.cancelQueries(["searchUsers", debouncedSearchTerm]);
return { userId }
}
onError: (err, userId, context) => {
},
onSettled: () => {
queryClient.invalidateQueries(["searchUsers", debouncedSearchTerm]);
},
});
const handleFollow = (e) => {
e.preventDefault();
e.stopPropagation();
followMutation.mutate(usersWithFollowStatus.user_id);
};
<Button
onClick={(e) => {
if (usersWithFollowStatus.following) handleUnfollow(e);
else handleFollow(e);
}}>
{usersWithFollowStatus.following ? (usersWithFollowStatus.followed ? "follow back" : "following") : "follow"}
</Button>export function SearchWrapper() {
const [searchTerm, setSearchTerm] = useState('')
const debouncedSearchTerm = useDebounce(searchTerm, 300);
const { data: usersList, error, isFetching } = useQuery({
queryKey: ['searchUsers', debouncedSearchTerm],
queryFn: () => fetchUsers(debouncedSearchTerm),
enabled: !!debouncedSearchTerm,
staleTime: 5000
});
const handleInputChange = (e) => {
setSearchTerm(e.target.value)
}
<Input
type="text"
placeholder="Search"
value={searchTerm}
onChange={handleInputChange}
/>
</div>
<UserSearchList debouncedSearchTerm={debouncedSearchTerm} usersList={usersList} />
const UserSeachList component
<FollowStatusButton
debouncedSearchTerm={debouncedSearchTerm}
usersWithFollowStatus={userWithFollowStatus}
/>
export function FollowStatusButton({ usersWithFollowStatus, debouncedSearchTerm }) {
const queryClient = useQueryClient();
const followMutation = useMutation({
mutationFn: async (userId) => {
await followUser(userId);
},
onMutate: async (userId) => {
await queryClient.cancelQueries(["searchUsers", debouncedSearchTerm]);
return { userId }
}
onError: (err, userId, context) => {
},
onSettled: () => {
queryClient.invalidateQueries(["searchUsers", debouncedSearchTerm]);
},
});
const handleFollow = (e) => {
e.preventDefault();
e.stopPropagation();
followMutation.mutate(usersWithFollowStatus.user_id);
};
<Button
onClick={(e) => {
if (usersWithFollowStatus.following) handleUnfollow(e);
else handleFollow(e);
}}>
{usersWithFollowStatus.following ? (usersWithFollowStatus.followed ? "follow back" : "following") : "follow"}
</Button>
