feat(web): reconcile pagination with notifications apollo cache

web/components/Notifications/List.vue

@@ -6,11 +6,8 @@ import {
 import type { NotificationType } from "~/composables/gql/graphql";
 import { useFragment } from "~/composables/gql/fragment-masking";
 import { useQuery } from "@vue/apollo-composable";
-// import { useInfiniteScroll } from "@vueuse/core";
 import { vInfiniteScroll } from "@vueuse/components";
 
-const element = ref<HTMLElement | null>(null);
-
 /**
  * Page size is the max amount of items fetched from the api in a single request.
  */
@@ -20,7 +17,7 @@ const props = withDefaults(
     pageSize?: number;
   }>(),
   {
-    pageSize: 25,
+    pageSize: 15,
   }
 );
 
@@ -49,20 +46,16 @@ const notifications = computed(() => {
 
 async function onLoadMore() {
   console.log("[getNotifications] onLoadMore");
-  // void fetchMore({
-  //   variables: {
-  //     filter: {
-  //       offset: notifications.value.length,
-  //       limit: props.pageSize,
-  //       type: props.type,
-  //     },
-  //   },
-  // });
+  void fetchMore({
+    variables: {
+      filter: {
+        offset: notifications.value.length,
+        limit: props.pageSize,
+        type: props.type,
+      },
+    },
+  });
 }
-
-// const { isLoading } = useInfiniteScroll(element, onLoadMore, {
-//   distance: 25,
-// });
 </script>
 
 <template>

web/components/Notifications/Sidebar.vue

@@ -3,7 +3,6 @@ import { BellIcon } from "@heroicons/vue/24/solid";
 import {
   Sheet,
   SheetContent,
-  SheetFooter,
   SheetHeader,
   SheetTitle,
   SheetTrigger,
@@ -70,11 +69,10 @@ const { teleportTarget, determineTeleportTarget } = useTeleport();
           <NotificationsList :type="NotificationType.Unread" />
         </TabsContent>
 
-        <TabsContent value="archived">
+        <TabsContent value="archived" class="h-[92%]">
           <NotificationsList :type="NotificationType.Archive" />
         </TabsContent>
       </Tabs>
-
     </SheetContent>
   </Sheet>
 </template>

web/composables/gql/graphql.ts

@@ -636,7 +636,7 @@ export type Mutation = {
   connectSignIn: Scalars['Boolean']['output'];
   connectSignOut: Scalars['Boolean']['output'];
   createNotification: Notification;
-  deleteNotification: Notification;
+  deleteNotification: NotificationOverview;
   /** Delete a user */
   deleteUser?: Maybe<User>;
   enableDynamicRemoteAccess: Scalars['Boolean']['output'];

web/helpers/apollo-cache.ts

@@ -2,6 +2,23 @@ import { InMemoryCache, type InMemoryCacheConfig } from "@apollo/client/core";
 
 const defaultCacheConfig: InMemoryCacheConfig = {
   typePolicies: {
+    Notifications: {
+      fields: {
+        list: {
+          keyArgs: ["filter", ["type", "importance"]],
+          merge(existing = [], incoming, { args }) {
+            // copied from https://www.apollographql.com/docs/react/pagination/core-api#improving-the-merge-function
+            const offset = args?.filter?.offset ?? 0;
+            const merged = existing.slice(0);
+
+            for (let i = 0; i < incoming.length; ++i) {
+              merged[offset + i] = incoming[i];
+            }
+            return merged;
+          },
+        },
+      },
+    },
     Mutation: {
       fields: {
         archiveAll: {