Activity injection into Apollo cache (#3665)

- Created addRecordInCache to inject a record in Apollo cache and inject single read query on this record
- Created createOneRecordInCache and createManyRecordsInCache that uses this addRecordInCache
- Created useOpenCreateActivityDrawerV2 hook to create an activity in cache and inject it into all other relevant requests in the app before opening activity drawer
- Refactored DEFAULT_SEARCH_REQUEST_LIMIT constant and hardcoded arbitrary request limits
- Added Apollo dev logs to see errors in the console when manipulating cache

packages/twenty-front/src/modules/activities/timeline/components/Timeline.tsx

@@ -1,14 +1,9 @@
-import React from 'react';
 import styled from '@emotion/styled';
-import { isNonEmptyString } from '@sniptt/guards';
 
 import { ActivityCreateButton } from '@/activities/components/ActivityCreateButton';
-import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
 import { useOpenCreateActivityDrawer } from '@/activities/hooks/useOpenCreateActivityDrawer';
-import { Activity } from '@/activities/types/Activity';
+import { useTimelineActivities } from '@/activities/timeline/hooks/useTimelineActivities';
 import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
-import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
-import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
 import { useIsMobile } from '@/ui/utilities/responsive/hooks/useIsMobile';
 
 import { TimelineItemsContainer } from './TimelineItemsContainer';
@@ -55,26 +50,22 @@ export const Timeline = ({
 }: {
   targetableObject: ActivityTargetableObject;
 }) => {
-  const { activityTargets } = useActivityTargets({ targetableObject });
-
-  const { records: activities } = useFindManyRecords({
-    skip: !activityTargets?.length,
-    objectNameSingular: CoreObjectNameSingular.Activity,
-    filter: {
-      id: {
-        in: activityTargets
-          ?.map((activityTarget) => activityTarget.activityId)
-          .filter(isNonEmptyString),
-      },
-    },
-    orderBy: {
-      createdAt: 'AscNullsFirst',
-    },
+  const { activities, initialized } = useTimelineActivities({
+    targetableObject,
   });
 
   const openCreateActivity = useOpenCreateActivityDrawer();
 
-  if (!activities.length) {
+  const showEmptyState = initialized && activities.length === 0;
+
+  const showLoadingState = !initialized;
+
+  if (showLoadingState) {
+    // TODO: Display a beautiful loading page
+    return <></>;
+  }
+
+  if (showEmptyState) {
     return (
       <StyledTimelineEmptyContainer>
         <StyledEmptyTimelineTitle>No activity yet</StyledEmptyTimelineTitle>
@@ -99,7 +90,7 @@ export const Timeline = ({
 
   return (
     <StyledMainContainer>
-      <TimelineItemsContainer activities={activities as Activity[]} />
+      <TimelineItemsContainer activities={activities} />
     </StyledMainContainer>
   );
 };

packages/twenty-front/src/modules/activities/timeline/hooks/useInjectIntoTimelineActivitiesQuery.ts

@@ -0,0 +1,89 @@
+import { useApolloClient } from '@apollo/client';
+import { isNonEmptyString } from '@sniptt/guards';
+
+import { makeTimelineActivitiesQueryVariables } from '@/activities/timeline/utils/makeTimelineActivitiesQueryVariables';
+import { Activity } from '@/activities/types/Activity';
+import { ActivityTarget } from '@/activities/types/ActivityTarget';
+import { useObjectMetadataItem } from '@/object-metadata/hooks/useObjectMetadataItem';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { getRecordConnectionFromRecords } from '@/object-record/cache/utils/getRecordConnectionFromRecords';
+import { getRecordsFromRecordConnection } from '@/object-record/cache/utils/getRecordsFromRecordConnection';
+import { ObjectRecordConnection } from '@/object-record/types/ObjectRecordConnection';
+
+export const useInjectIntoTimelineActivitiesQuery = () => {
+  const apolloClient = useApolloClient();
+
+  const {
+    objectMetadataItem: objectMetadataItemActivity,
+    findManyRecordsQuery: findManyActivitiesQuery,
+  } = useObjectMetadataItem({
+    objectNameSingular: CoreObjectNameSingular.Activity,
+  });
+
+  const injectIntoTimelineActivitiesQuery = ({
+    activityTargets,
+    activityToInject,
+  }: {
+    activityTargets: ActivityTarget[];
+    activityToInject: Activity;
+  }) => {
+    const activityIds = activityTargets
+      ?.map((activityTarget) => activityTarget.activityId)
+      .filter(isNonEmptyString);
+
+    const timelineActivitiesQueryVariables =
+      makeTimelineActivitiesQueryVariables({
+        activityIds,
+      });
+
+    const exitistingActivitiesQueryResult = apolloClient.readQuery({
+      query: findManyActivitiesQuery,
+      variables: timelineActivitiesQueryVariables,
+    });
+
+    const extistingActivities = exitistingActivitiesQueryResult
+      ? getRecordsFromRecordConnection({
+          recordConnection: exitistingActivitiesQueryResult[
+            objectMetadataItemActivity.namePlural
+          ] as ObjectRecordConnection<Activity>,
+        })
+      : [];
+
+    const newActivity = {
+      ...activityToInject,
+      __typename: 'Activity',
+    };
+
+    const newActivitiesSortedAsActivitiesQuery = [
+      newActivity,
+      ...extistingActivities,
+    ];
+
+    const newActivityIdsSortedAsActivityTargetsQuery = [
+      ...extistingActivities,
+      newActivity,
+    ].map((activity) => activity.id);
+
+    const newTimelineActivitiesQueryVariables =
+      makeTimelineActivitiesQueryVariables({
+        activityIds: newActivityIdsSortedAsActivityTargetsQuery,
+      });
+
+    const newActivityConnectionForCache = getRecordConnectionFromRecords({
+      objectNameSingular: CoreObjectNameSingular.Activity,
+      records: newActivitiesSortedAsActivitiesQuery,
+    });
+
+    apolloClient.writeQuery({
+      query: findManyActivitiesQuery,
+      variables: newTimelineActivitiesQueryVariables,
+      data: {
+        [objectMetadataItemActivity.namePlural]: newActivityConnectionForCache,
+      },
+    });
+  };
+
+  return {
+    injectIntoTimelineActivitiesNextQuery: injectIntoTimelineActivitiesQuery,
+  };
+};

packages/twenty-front/src/modules/activities/timeline/hooks/useTimelineActivities.ts

@@ -0,0 +1,73 @@
+import { useEffect, useState } from 'react';
+import { isNonEmptyArray, isNonEmptyString } from '@sniptt/guards';
+
+import { useActivityTargets } from '@/activities/hooks/useActivityTargets';
+import { makeTimelineActivitiesQueryVariables } from '@/activities/timeline/utils/makeTimelineActivitiesQueryVariables';
+import { Activity } from '@/activities/types/Activity';
+import { ActivityTargetableObject } from '@/activities/types/ActivityTargetableEntity';
+import { CoreObjectNameSingular } from '@/object-metadata/types/CoreObjectNameSingular';
+import { useFindManyRecords } from '@/object-record/hooks/useFindManyRecords';
+
+export const useTimelineActivities = ({
+  targetableObject,
+}: {
+  targetableObject: ActivityTargetableObject;
+}) => {
+  const {
+    activityTargets,
+    loadingActivityTargets,
+    initialized: initializedActivityTargets,
+  } = useActivityTargets({
+    targetableObject,
+  });
+
+  const [initialized, setInitialized] = useState(false);
+
+  const [activities, setActivities] = useState<Activity[]>([]);
+
+  const activityIds = activityTargets
+    ?.map((activityTarget) => activityTarget.activityId)
+    .filter(isNonEmptyString);
+
+  const timelineActivitiesQueryVariables = makeTimelineActivitiesQueryVariables(
+    {
+      activityIds,
+    },
+  );
+
+  const { records: activitiesFromRequest, loading: loadingActivities } =
+    useFindManyRecords<Activity>({
+      skip: loadingActivityTargets || !isNonEmptyArray(activityTargets),
+      objectNameSingular: CoreObjectNameSingular.Activity,
+      filter: timelineActivitiesQueryVariables.filter,
+      orderBy: timelineActivitiesQueryVariables.orderBy,
+      onCompleted: () => {
+        if (!initialized) {
+          setInitialized(true);
+        }
+      },
+    });
+
+  useEffect(() => {
+    if (!loadingActivities) {
+      setActivities(activitiesFromRequest);
+    }
+  }, [activitiesFromRequest, loadingActivities]);
+
+  const noActivityTargets =
+    initializedActivityTargets && !isNonEmptyArray(activityTargets);
+
+  useEffect(() => {
+    if (noActivityTargets) {
+      setInitialized(true);
+    }
+  }, [noActivityTargets]);
+
+  const loading = loadingActivities || loadingActivityTargets;
+
+  return {
+    activities,
+    loading,
+    initialized,
+  };
+};

packages/twenty-front/src/modules/activities/timeline/utils/makeTimelineActivitiesQueryVariables.ts

@@ -0,0 +1,18 @@
+import { ObjectRecordQueryVariables } from '@/object-record/types/ObjectRecordQueryVariables';
+
+export const makeTimelineActivitiesQueryVariables = ({
+  activityIds,
+}: {
+  activityIds: string[];
+}): ObjectRecordQueryVariables => {
+  return {
+    filter: {
+      id: {
+        in: activityIds,
+      },
+    },
+    orderBy: {
+      createdAt: 'AscNullsFirst',
+    },
+  };
+};