feat: realtime feed with apollo subs

apps/web/src/components/Publication/Actions/Like.tsx

@@ -1,6 +1,5 @@
 import type { ApolloCache } from '@apollo/client';
 import type { MirrorablePublication, ReactionRequest } from '@hey/lens';
-import type { FC } from 'react';
 
 import errorToast from '@helpers/errorToast';
 import { Leafwatch } from '@helpers/leafwatch';
@@ -18,6 +17,7 @@ import { Tooltip } from '@hey/ui';
 import cn from '@hey/ui/cn';
 import { useCounter, useToggle } from '@uidotdev/usehooks';
 import { motion } from 'framer-motion';
+import { type FC, useEffect } from 'react';
 import toast from 'react-hot-toast';
 import { useProfileRestriction } from 'src/store/non-persisted/useProfileRestriction';
 import { useProfileStore } from 'src/store/persisted/useProfileStore';
@@ -34,10 +34,15 @@ const Like: FC<LikeProps> = ({ publication, showCount }) => {
  const [hasReacted, toggleReact] = useToggle(
  publication.operations.hasReacted
  );
- const [reactions, { decrement, increment }] = useCounter(
+ const [reactions, { decrement, increment, set }] = useCounter(
  publication.stats.reactions
  );
 
+ useEffect(() => {
+ set(publication.stats.reactions);
+ // eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [publication.stats.reactions]);
+
  const updateCache = (cache: ApolloCache<any>) => {
  cache.modify({
  fields: {

apps/web/src/components/Publication/Actions/index.tsx

@@ -1,10 +1,12 @@
 import type { AnyPublication } from '@hey/lens';
 import type { FC } from 'react';
 
+import { useApolloClient } from '@apollo/client';
 import getPublicationViewCountById from '@hey/helpers/getPublicationViewCountById';
 import isOpenActionAllowed from '@hey/helpers/isOpenActionAllowed';
 import { isMirrorPublication } from '@hey/helpers/publicationHelpers';
 import stopEventPropagation from '@hey/helpers/stopEventPropagation';
+import { useNewPublicationStatsSubscriptionSubscription } from '@hey/lens';
 import { memo } from 'react';
 import { useImpressionsStore } from 'src/store/non-persisted/useImpressionsStore';
 import { useFeatureFlagsStore } from 'src/store/persisted/useFeatureFlagsStore';
@@ -33,6 +35,9 @@ const PublicationActions: FC<PublicationActionsProps> = ({
  const { currentProfile } = useProfileStore();
  const { gardenerMode } = useFeatureFlagsStore();
  const { publicationViews } = useImpressionsStore();
+
+ const { cache } = useApolloClient();
+
  const hasOpenAction = (targetPublication.openActionModules?.length || 0) > 0;
 
  const canMirror = currentProfile
@@ -46,6 +51,26 @@ const PublicationActions: FC<PublicationActionsProps> = ({
  targetPublication.id
  );
 
+ useNewPublicationStatsSubscriptionSubscription({
+ onData: ({ data }) => {
+ if (data.data?.newPublicationStats) {
+ cache.modify({
+ fields: {
+ comments: () => data.data?.newPublicationStats.comments || 0,
+ countOpenActions: () =>
+ data.data?.newPublicationStats.countOpenActions || 0,
+ mirrors: () => data.data?.newPublicationStats.mirrors || 0,
+ quotes: () => data.data?.newPublicationStats.quotes || 0,
+ reactions: () => data.data?.newPublicationStats.reactions || 0
+ },
+ id: `PublicationStats:${data.data?.newPublicationStats.id}`
+ });
+ }
+ },
+ skip: !targetPublication.id,
+ variables: { for: targetPublication.id }
+ });
+
  return (
  <span
  className="-ml-2 mt-2 flex flex-wrap items-center gap-x-6 gap-y-1 sm:gap-8"

packages/lens/documents/subscriptions/NewPublicationStatsSubscription.graphql

@@ -0,0 +1,10 @@
+subscription NewPublicationStatsSubscription($for: PublicationId!) {
+ newPublicationStats(for: $for) {
+ id
+ reactions
+ comments
+ mirrors
+ quotes
+ countOpenActions
+ }
+}

packages/lens/generated.ts

@@ -1326,7 +1326,7 @@ export type DisputedReport = {
  createdAt: Scalars['DateTime']['output'];
  disputeReason: Scalars['String']['output'];
  disputer: Profile;
- reportAdditionalInfo: Scalars['String']['output'];
+ reportAdditionalInfo?: Maybe<Scalars['String']['output']>;
  reportReason: Scalars['String']['output'];
  reportSubreason: Scalars['String']['output'];
  reportedProfile: Profile;
@@ -969625,6 +969625,23 @@ export type NewNotificationSubscriptionSubscription = {
  | null;
 };
 
+export type NewPublicationStatsSubscriptionSubscriptionVariables = Exact<{
+ for: Scalars['PublicationId']['input'];
+}>;
+
+export type NewPublicationStatsSubscriptionSubscription = {
+ __typename?: 'Subscription';
+ newPublicationStats: {
+ __typename?: 'PublicationStats';
+ id: any;
+ reactions: number;
+ comments: number;
+ mirrors: number;
+ quotes: number;
+ countOpenActions: number;
+ };
+};
+
 export type UserSigNoncesSubscriptionSubscriptionVariables = Exact<{
  address: Scalars['EvmAddress']['input'];
 }>;
@@ -978099,6 +978116,59 @@ export type NewNotificationSubscriptionSubscriptionHookResult = ReturnType<
 >;
 export type NewNotificationSubscriptionSubscriptionResult =
  Apollo.SubscriptionResult<NewNotificationSubscriptionSubscription>;
+export const NewPublicationStatsSubscriptionDocument = gql`
+ subscription NewPublicationStatsSubscription($for: PublicationId!) {
+ newPublicationStats(for: $for) {
+ id
+ reactions
+ comments
+ mirrors
+ quotes
+ countOpenActions
+ }
+ }
+`;
+
+/**
+ * __useNewPublicationStatsSubscriptionSubscription__
+ *
+ * To run a query within a React component, call `useNewPublicationStatsSubscriptionSubscription` and pass it any options that fit your needs.
+ * When your component renders, `useNewPublicationStatsSubscriptionSubscription` returns an object from Apollo Client that contains loading, error, and data properties
+ * you can use to render your UI.
+ *
+ * @param baseOptions options that will be passed into the subscription, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
+ *
+ * @example
+ * const { data, loading, error } = useNewPublicationStatsSubscriptionSubscription({
+ * variables: {
+ * for: // value for 'for'
+ * },
+ * });
+ */
+export function useNewPublicationStatsSubscriptionSubscription(
+ baseOptions: Apollo.SubscriptionHookOptions<
+ NewPublicationStatsSubscriptionSubscription,
+ NewPublicationStatsSubscriptionSubscriptionVariables
+ > &
+ (
+ | {
+ variables: NewPublicationStatsSubscriptionSubscriptionVariables;
+ skip?: boolean;
+ }
+ | { skip: boolean }
+ )
+) {
+ const options = { ...defaultOptions, ...baseOptions };
+ return Apollo.useSubscription<
+ NewPublicationStatsSubscriptionSubscription,
+ NewPublicationStatsSubscriptionSubscriptionVariables
+ >(NewPublicationStatsSubscriptionDocument, options);
+}
+export type NewPublicationStatsSubscriptionSubscriptionHookResult = ReturnType<
+ typeof useNewPublicationStatsSubscriptionSubscription
+>;
+export type NewPublicationStatsSubscriptionSubscriptionResult =
+ Apollo.SubscriptionResult<NewPublicationStatsSubscriptionSubscription>;
 export const UserSigNoncesSubscriptionDocument = gql`
  subscription UserSigNoncesSubscription($address: EvmAddress!) {
  userSigNonces(address: $address) {