How to use the @apollo/react-hooks.useSubscription function in @apollo/react-hooks

const onDelete = (item: Configuration) => {
    successNotification({
      title: NOTIFICATION.DELETE_CONFIGURATION.TITLE,
      content: NOTIFICATION.DELETE_CONFIGURATION.CONTENT.replace(
        CONFIGURATION_VARIABLE,
        item.name,
      ),
    });
    setOriginalConfigs(configs => configs.filter(c => c.name !== item.name));
  };

  const subscription = currentNamespace
    ? ADDONS_CONFIGURATION_EVENT_SUBSCRIPTION
    : CLUSTER_ADDONS_CONFIGURATION_EVENT_SUBSCRIPTION;

  useSubscription<
    SubscriptionPayload,
    AddonsConfigurationSubscriptionVariables
  >(subscription, {
    variables: {
      namespace: currentNamespace,
    },
    onSubscriptionData: ({ subscriptionData }) => {
      const { data, error } = subscriptionData;

      if (error) {
        // errorNotification('Error', ERRORS.SERVER);
        errorNotification({
          title: 'Error',
          content: '',
        });
        return;

const PowerDistribution = ({client, simulator, clientObj}) => {
  const {loading, data} = useQuery(SYSTEMS_QUERY, {
    variables: {
      simulatorId: simulator.id,
    },
  });
  const {data: reactorSub} = useSubscription(REACTOR_SUB, {
    variables: {simulatorId: simulator.id},
  });
  const {data: systemsSub} = useSubscription(SYSTEMS_SUB, {
    variables: {simulatorId: simulator.id},
  });

  if (loading || !data) return null;
  const systems = systemsSub ? systemsSub.systemsUpdate : data.systems;
  const reactors = reactorSub ? reactorSub.reactorUpdate : data.reactors;
  // Get the batteries, get just the first one.
  const battery = reactors.find(r => r.model === "battery");
  const reactor = reactors.find(r => r.model === "reactor");
  const charge = battery && battery.batteryChargeLevel;

  const trainingSteps = hasBattery =>
    [
      {
        selector: ".nothing",
        content:

const TodoPublicListSubscription = () => {
  // Run a subscription to get the latest public todo
  const NOTIFY_NEW_PUBLIC_TODOS = gql`
    subscription notifyNewPublicTodos {
      todos(
        where: { is_public: { _eq: true } }
        limit: 1
        order_by: { created_at: desc }
      ) {
        id
        created_at
      }
    }
  `;

  const { loading, error, data } = useSubscription(NOTIFY_NEW_PUBLIC_TODOS);
  if (loading) {
    return <span>Loading...</span>;
  }
  if (error || !data) {
    return <span>Error</span>;
  }
  return (
    
  );
};

export function useOnCommentAddedSubscription(baseOptions?: ApolloReactHooks.SubscriptionHookOptions) {
  return ApolloReactHooks.useSubscription(OnCommentAddedDocument, baseOptions);
}
export type OnCommentAddedSubscriptionHookResult = ReturnType;

const MedicalRoster = props => {
  const {simulator} = props;
  const {loading, data} = useQuery(MEDICAL_ROSTER_QUERY, {
    variables: {simulatorId: simulator.id},
  });
  const {data: sickbaySubData} = useSubscription(MEDICAL_ROSTER_SUB, {
    variables: {simulatorId: simulator.id},
  });
  const {data: crewSubData} = useSubscription(MEDICAL_ROSTER_CREW_SUB, {
    variables: {simulatorId: simulator.id},
  });

  if (loading || !data) return null;
  const sickbay = sickbaySubData ? sickbaySubData.sickbayUpdate : data.sickbay;
  const crew = crewSubData ? crewSubData.crewUpdate : data.crew;

  if (!sickbay) return <div>No sickbay</div>;
  return ;
};
export default MedicalRoster;

const useChatChanged = (channelId) => {
  const client = useApolloClient();
  const published = useSubscription(CHAT_CHANGED, { variables: { channelId } });
  const chatChanged = published.data && published.data.chatChanged;

  if (!chatChanged) return;

  const cacheData = client.readQuery({ query: GET_CHAT_CACHED });
  const data = addOrUpdateChat(cacheData, chatChanged);

  client.writeQuery({ query: GET_CHAT_CACHED, data });
};

const ProfileInfo = ({ user }) => {
  const [{ auth }] = useStore();

  const { data, loading } = useSubscription(IS_USER_ONLINE_SUBSCRIPTION, {
    variables: { authUserId: auth.user.id, userId: user.id },
  });

  let isUserOnline = user.isOnline;
  if (!loading && data) {
    isUserOnline = data.isUserOnline.isOnline;
  }

  return (

const targetId = useNavigationParam('targetId');

  const { navigate } = useNavigation();
  const { user, theme } = useContext(AppContext);
  const [messages, setMessages] = useState([]);

  const [queryChat, {
    called: chatQueryCalled,
    data: chatQueryData,
    loading: chatQueryLoading,
    error: chatQueryError
  }] = useLazyQuery(QUERY_CHAT, {
    variables: { chatId },
    fetchPolicy: 'network-only'
  });
  const { data: chatSubscriptionData, loading: chatSubscriptionLoading } = useSubscription(SUBSCRIPTION_CHAT, {
    variables: { chatId }
  });
  const [addMessage] = useMutation(MUTATION_ADD_MESSAGE);
  const [connectChat] = useMutation(MUTATION_CONNECT_CHAT_TO_USERS);

  useEffect(() => {
    if (!chatSubscriptionLoading) {
      setMessages(chatSubscriptionData.chat.messages);
    } else if (chatSubscriptionLoading) {
      if (chatQueryCalled && !chatQueryLoading) {
        setMessages(chatQueryData.chat.messages);
      } else if (!chatQueryCalled) {
        queryChat();
      }
    }
  }, [chatQueryData, chatQueryCalled, chatQueryLoading, chatSubscriptionData, chatSubscriptionLoading]);

const MedicalRoster = props => {
  const {simulator} = props;
  const {loading, data} = useQuery(MEDICAL_ROSTER_QUERY, {
    variables: {simulatorId: simulator.id},
  });
  const {data: sickbaySubData} = useSubscription(MEDICAL_ROSTER_SUB, {
    variables: {simulatorId: simulator.id},
  });
  const {data: crewSubData} = useSubscription(MEDICAL_ROSTER_CREW_SUB, {
    variables: {simulatorId: simulator.id},
  });

  if (loading || !data) return null;
  const sickbay = sickbaySubData ? sickbaySubData.sickbayUpdate : data.sickbay;
  const crew = crewSubData ? crewSubData.crewUpdate : data.crew;

  if (!sickbay) return <div>No sickbay</div>;
  return ;
};
export default MedicalRoster;