@apollo/client#useSubscription JavaScript Examples

TodoList = () => {
  const { loading, error, data } = useSubscription(GET_TODOS);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error :(</p>;
  return (
    <Card.Group>
      {data.queryTodo.map(({ id, title, description, completed }) => (
        <Card>
          <Image
            src="/diggy.png"
            wrapped
            ui={false}
          />
          <Card.Content>
            <Card.Header>{title}</Card.Header>
            <Card.Meta>{completed ? "Done" : "Pending"}</Card.Meta>
            <Card.Description>{description}</Card.Description>
          </Card.Content>
        </Card>
      ))}
    </Card.Group>
  );
}

Posts = () => {
  const [name, setName] = useState('');
  const [text, setText] = useState('');

  const [sendMessage, { error: mutationError }] = useMutation(SEND_MESSAGE);
  const { data, error: subscriptionError } = useSubscription(SUBSCRIPTION_QUERY);

  if (!data || !data.queryMessage) return (<h1>Connecting...</h1>);
  if (subscriptionError || mutationError) return (<h1>Error...</h1>);

  const handleClick = () => {
    if (name && text) {
      sendMessage({ variables: { name, text, time: (new Date()).toISOString() } });
    }
  }

  return (
    <>
      <hr></hr>
      <label>Enter you name : </label>
      <input required type="text" name="name" maxLength="25" onChange={e => setName(e.target.value)}></input>
      <label> Enter your message : </label>
      <input required type="text" name="message" onChange={e => setText(e.target.value)}></input>
      <button type="button" onClick={() => handleClick()}>Post</button>
      <hr></hr>
      <h3>Total Posts : {data.queryMessage.length}</h3>
      <hr></hr>
      <table>
        <thead>
          <tr>
            <th>Time</th>
            <th>Author</th>
            <th>Post</th>
          </tr>
        </thead>
        <tbody>
          {data.queryMessage.map(m => (
            <tr>
              <td>{(new Date(m.time)).toUTCString()}</td>
              <td align="left">{m.name}</td>
              <td width="1000" align="left">{m.text}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </>
  );
}

Feed = () => {
  const { user } = useAuth0();
  const { email } = user;

  const { data, loading, error } = useSubscription(QUERY_LOGGED_IN_USER, {
    variables: {
      userFilter: {
        email: {
          eq: email,
        },
      },
    },
  });

  if (loading) {
    return <Spinner />;
  }
  if (error) {
    return (
      <div>
        <Text size="large" color="red">
          {error.message}
        </Text>
      </div>
    );
  }
  console.log(data);
  return (
    <Box pad="large" direction="row" alignSelf="center">
      <Grid
        gap="large"
        rows="medium"
        columns={{ count: "fit", size: ["small", "medium"] }}
      >
        {data.queryUser.map((userInfo) =>
          userInfo.following.map((followedUser) =>
            followedUser.posts.map((post) => (
              <Card width="medium" key={post.id}>
                <CardHeader
                  pad={{ horizontal: "small", vertical: "small" }}
                  background="light-1"
                  width="medium"
                  justify="stretch"
                  gap="small"
                >
                  <Avatar
                    size="small"
                    src={post.postedBy.avatarImageURL}
                    a11yTitle="Generated avatar for the user from robohash.org"
                  />

                  <Heading level="4" margin="none">
                    {post.postedBy.username}
                  </Heading>
                </CardHeader>
                <CardBody height="medium">
                  <Image fit="cover" src={post.imageURL} />
                </CardBody>
                <CardFooter
                  pad={{ horizontal: "small" }}
                  height="xxsmall"
                  background="light-3"
                  justify="between"
                  gap="xxsmall"
                >
                  <Text size="small">{post.description}</Text>
                  <Heading level="5" margin="none">
                    {post.likes === 1
                      ? `${post.likes} like`
                      : `${post.likes} likes`}
                  </Heading>
                </CardFooter>
              </Card>
            ))
          )
        )}
      </Grid>
    </Box>
  );
}

CertificateThanksPage = () => {
  const styles = useStyles();
  const { i18n } = useTranslation();

  const language = i18n.language === 'ua' ? 0 : 1;

  const [paidOrderLoading, setLoading] = useState(true);
  const [certificatesArr, setCertificates] = useState(null);

  const certificatesOrderId = getFromLocalStorage(orderDataToLS.certificatesOrderId);

  const [sendCertificateCodesToEmail] = useLazyQuery(sendCertificatesCodesToEmail);

  useSubscription(certificatesPaidSubscription, {
    variables: { certificatesOrderId },
    onSubscriptionData: ({ subscriptionData: { data } }) => {
      const {
        certificatesPaid: { certificates }
      } = data;

      sendCertificateCodesToEmail({
        variables: {
          language,
          certificates
        }
      });
      setCertificates(certificates);
      setLoading(false);
    }
  });

  if (paidOrderLoading) {
    return <Loader data-testid='loader' />;
  }

  return (
    <div className={styles.thanksBackground}>
      <div className={styles.thanksContainer}>
        {!paidOrderLoading && (
          <div className={styles.thanksInfo}>
            <CertificateThanksCard
              count={certificatesArr.length}
              name={certificatesArr[0]?.name}
              email={certificatesArr[0]?.email}
              value={certificatesArr[0]?.value}
              paymentStatus={certificatesArr[0]?.paymentStatus}
              dateStart={certificatesArr[0]?.dateStart}
              dateEnd={certificatesArr[0]?.dateEnd}
            />
          </div>
        )}
      </div>
    </div>
  );
}

ThanksPage = () => {
  const router = useLocation();
  const { t, i18n } = useTranslation();
  const dispatch = useDispatch();

  const language = i18n.language === 'ua' ? 0 : 1;

  const [paidOrderLoading, setLoading] = useState(true);

  const { order, loading, user } = useSelector(({ Order, User }) => ({
    order: Order.order,
    loading: Order.loading,
    user: User.userData
  }));

  const styles = useStyles();
  const paymentMethod = getFromLocalStorage(orderDataToLS.paymentMethod);

  const [sendPaidOrderToEmail] = useLazyQuery(sendOrderToEmail);

  const paidOrderNumber = router.pathname.slice(router.pathname.length - ORDER_NUMBER_LENGTH);

  useSubscription(orderPaidSubscription, {
    variables: { orderId: paidOrderNumber },
    onSubscriptionData: ({
      subscriptionData: {
        data: { paidOrder }
      }
    }) => {
      dispatch(setOrder(paidOrder));
      setToLocalStorage(orderDataToLS.order, paidOrder);
      sendPaidOrderToEmail({
        variables: {
          language,
          paidOrderNumber
        }
      });
      setLoading(false);
    }
  });

  useEffect(() => {
    if (paymentMethod === checkoutPayMethod.cash) {
      dispatch(getOrder());
    }
  }, [dispatch, language, user]);

  if ((paymentMethod === checkoutPayMethod.card && paidOrderLoading) || loading) {
    return <Loader data-testid='loader' />;
  }

  const getDeliveryAddress = (orderPayload) => {
    const deliveryType = orderPayload?.delivery.sentBy;
    const courierOffice = orderPayload?.delivery.courierOffice;
    const customerAddress = `${orderPayload?.delivery.city}, ${orderPayload?.delivery.street}, ${orderPayload?.delivery.house}`;
    if (deliveryType === deliveryTypes.NOVAPOST || deliveryType === deliveryTypes.UKRPOST) {
      return courierOffice;
    }
    if (deliveryType === deliveryTypes.SELFPICKUP) {
      return t('thanksPage.thanksCard.selfDelivery');
    }
    return customerAddress;
  };

  return (
    <div className={styles.thanksBackground}>
      <div className={styles.thanksContainer}>
        {!order && <Redirect to={pathToMain} /> &&
          paymentMethod !== t('checkout.checkoutPayment.card')}
        {(!loading || !paidOrderLoading) && (
          <>
            <div className={styles.thunksInfo}>
              <ThanksCard
                orderNumber={order?.orderNumber}
                customerName={`${order?.recipient.firstName} ${order?.recipient.lastName}`}
                phoneNumber={order?.recipient.phoneNumber}
                deliveryType={order?.delivery.sentBy}
                address={getDeliveryAddress(order)}
              />
            </div>
          </>
        )}
      </div>
    </div>
  );
}