Subscribe to specific parts of the cache and update ui when cache is updated via optimistic update

[AndonMitev]

Hey I do have following scenario, I have created a query function that is fetching initial state and stores it. Later i receive new state and i update the cache manually. In my components i'm using the query to read the data but i'm not retrieving latest data. I check there is a queryClient.getQueryCache().subscribe() but does subscribe to the whole cache and not to specific queryKey? So how i can subscribe to the cache so when is updated manually on new message to consume it where is needed?

queryFn:

export const useGetFriendsList = () => {
  const { isLoggedIn } = useEvmClientContext();

  return useQuery({
    queryKey: [REACT_QUERY_KEYS.GET_FRIENDS],
    queryFn: () => FriendsServiceInstance.getFriends(),
    enabled: isLoggedIn,
  });
};

Updating cache manually when new socket message is received:

 const updateFriendsCache = (friend: UserProfileType, status: FriendsStatusesType) => {
      queryClient.cancelQueries({ queryKey: [REACT_QUERY_KEYS.GET_FRIENDS], exact: true });

      const previousFriends = queryClient.getQueryData<GetFriendsResponseType>([REACT_QUERY_KEYS.GET_FRIENDS]);

      if (!previousFriends) {
        return;
      }

      let newFriends = { ...previousFriends };

      switch (status) {
        case 'pending':
          newFriends.pending_from_user.push(friend);
          break;
        case 'accepted':
          newFriends.pending_from_user = newFriends.pending_from_user.filter(
            (pendingFriends) => pendingFriends.displayName !== friend.displayName,
          );
          newFriends.accepted_users.push(friend);
          break;
        case 'declined': {
          newFriends.pending_from_user = newFriends.pending_from_user.filter(
            (pendingFriends) => pendingFriends.displayName !== friend.displayName,
          );
          break;
        }
        case 'removed':
        case 'blocked': {
          newFriends.accepted_users = newFriends.accepted_users.filter(
            (pendingFriends) => pendingFriends.displayName !== friend.displayName,
          );
          break;
        }
      }

      queryClient.setQueryData([REACT_QUERY_KEYS.GET_FRIENDS], newFriends);
      queryClient.invalidateQueries({ queryKey: [REACT_QUERY_KEYS.GET_FRIENDS] });
    };

Currently the way that i'm reading data:
const { data } = useGetFriendsList();