Reactjs React Apollo:订阅多个事件的推荐方式,这些事件不会';不需要用户界面更新

Reactjs React Apollo:订阅多个事件的推荐方式,这些事件不会';不需要用户界面更新,reactjs,react-apollo,Reactjs,React Apollo,因此,我想为当前登录的用户订阅多个事件 我已将订阅提取到一个单独的函数中,该函数从内部更新我记录的用户状态,并返回一个订阅数组 现在我想知道有没有其他更好的方法 这是解决此问题的正确/推荐方法吗 当前实施 export const subscribeToCurrentUserUpdates = (setLoggedUser) => { const friendRequestObserver$ = apolloClient.subscribe( { query: queries.

因此,我想为当前登录的用户订阅多个事件

我已将订阅提取到一个单独的函数中,该函数从内部更新我记录的用户状态,并返回一个订阅数组

现在我想知道有没有其他更好的方法

这是解决此问题的正确/推荐方法吗

当前实施

export const subscribeToCurrentUserUpdates = (setLoggedUser) => {
  const friendRequestObserver$ = apolloClient.subscribe(
    { query: queries.NEW_FRIEND_REQUEST },
  );
  const followersUpdatesObserver$ = apolloClient.subscribe(
    { query: queries.FOLLOWERS_UPDATES },
  );
  const acceptedFriendRequestObserver$ = apolloClient.subscribe(
    { query: queries.ACCEPTED_FRIEND_REQUEST },
  );

  const friendRequestSubscription = friendRequestObserver$.subscribe({
    next: ({ data: { newFriendRequest } }) => {
      Alert.success(`${newFriendRequest.username} just sent you a friend request`);

      setLoggedUser((loggedUser) => {
        loggedUser.incomingFriendRequests.unshift(newFriendRequest._id);
      });
    },
    error: err => console.error(err),
  });

  const followersUpdatesSubscription = followersUpdatesObserver$.subscribe({
    next: ({ data: { followersUpdates: { follower, isFollow } } }) => {
      if (isFollow) {
        Alert.success(`${follower.username} is now following you`);
      }

      setLoggedUser((loggedUser) => {
        isFollow
          ? loggedUser.followers.unshift(follower._id)
          : loggedUser.followers.splice(loggedUser.followers.indexOf(follower._id), 1);
      });
    },
    error: err => console.error(err),
  });

  const acceptedFriendRequestSubscription = acceptedFriendRequestObserver$.subscribe({
    next: ({ data: { acceptedFriendRequest: newFriend } }) => {
      Alert.success(`${newFriend.username} just accepted your friend request!`);

      setLoggedUser((loggedUser) => {
        loggedUser.friends.push(newFriend._id);
        loggedUser.sentFriendRequests.splice(
          loggedUser.sentFriendRequests.indexOf(newFriend._id), 1,
        );
      });
    },
    error: err => console.error(err),
  });

  return [
    friendRequestSubscription,
    followersUpdatesSubscription,
    acceptedFriendRequestSubscription,
  ];
};
我从我的组件订阅的方式

const App = () => {
  const currentUserSubscriptionRef = useRef();

  useEffect(() => {
    if (loggedUser && !currentUserSubscriptionRef.current) {
      currentUserSubscriptionRef.current = subscribeToCurrentUserUpdates(
        setLoggedUser,
      );
    }
    if (!loggedUser && currentUserSubscriptionRef.current) {
      currentUserSubscriptionRef.current.forEach((subscription) => {
        subscription.unsubscribe();
      });
      currentUserSubscriptionRef.current = null;
    }
  }, [loggedUser, setLoggedUser]);
}