fix(tree): update sidebar-pages cache directly instead of refetching on page move (#1870)

apps/client/src/features/page/queries/page-query.ts

@@ -163,9 +163,6 @@ export function useDeletePageMutation() {
 export function useMovePageMutation() {
   return useMutation<void, Error, IMovePage>({
     mutationFn: (data) => movePage(data),
-    onSuccess: () => {
-      invalidateOnMovePage();
-    },
   });
 }
 
@@ -458,17 +455,127 @@ export function invalidateOnUpdatePage(
   });
 }
 
-export function invalidateOnMovePage() {
-  //for move invalidate all sidebars for now (how to do???)
-  //invalidate all root sidebar pages
-  queryClient.invalidateQueries({
-    queryKey: ["root-sidebar-pages"],
-  });
-  //invalidate all sub sidebar pages
-  queryClient.invalidateQueries({
-    queryKey: ["sidebar-pages"],
-  });
-  // ---
+export function updateCacheOnMovePage(
+  spaceId: string,
+  pageId: string,
+  oldParentId: string | null,
+  newParentId: string | null,
+  pageData: Partial<IPage>,
+) {
+  // Remove page from old parent's cache
+  const oldQueryKey =
+    oldParentId === null
+      ? ["root-sidebar-pages", spaceId]
+      : ["sidebar-pages", { pageId: oldParentId, spaceId }];
+
+  queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
+    oldQueryKey,
+    (old) => {
+      if (!old) return old;
+      return {
+        ...old,
+        pages: old.pages.map((page) => ({
+          ...page,
+          items: page.items.filter((item) => item.id !== pageId),
+        })),
+      };
+    },
+  );
+
+  // Update old parent's hasChildren flag if it has no more children
+  if (oldParentId !== null) {
+    const oldParentCache = queryClient.getQueryData<
+      InfiniteData<IPagination<IPage>>
+    >(["sidebar-pages", { pageId: oldParentId, spaceId }]);
+
+    const remainingChildren =
+      oldParentCache?.pages.flatMap((p) => p.items).length ?? 0;
+
+    if (remainingChildren === 0) {
+      // Update hasChildren in all caches where old parent appears
+      const allSideBarMatches = queryClient.getQueriesData({
+        predicate: (query) =>
+          query.queryKey[0] === "root-sidebar-pages" ||
+          query.queryKey[0] === "sidebar-pages",
+      });
+
+      allSideBarMatches.forEach(([key]) => {
+        queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(
+          key,
+          (old) => {
+            if (!old) return old;
+            return {
+              ...old,
+              pages: old.pages.map((page) => ({
+                ...page,
+                items: page.items.map((item) =>
+                  item.id === oldParentId
+                    ? { ...item, hasChildren: false }
+                    : item,
+                ),
+              })),
+            };
+          },
+        );
+      });
+    }
+  }
+
+  // Add page to new parent's cache
+  const newQueryKey =
+    newParentId === null
+      ? ["root-sidebar-pages", spaceId]
+      : ["sidebar-pages", { pageId: newParentId, spaceId }];
+
+  queryClient.setQueryData<InfiniteData<IPagination<Partial<IPage>>>>(
+    newQueryKey,
+    (old) => {
+      if (!old) return old;
+
+      // Check if page already exists in new location
+      const exists = old.pages.some((page) =>
+        page.items.some((item) => item.id === pageId),
+      );
+      if (exists) return old;
+
+      return {
+        ...old,
+        pages: old.pages.map((page, index) => {
+          if (index === old.pages.length - 1) {
+            return {
+              ...page,
+              items: [...page.items, pageData],
+            };
+          }
+          return page;
+        }),
+      };
+    },
+  );
+
+  // Update new parent's hasChildren flag
+  if (newParentId !== null) {
+    const allSideBarMatches = queryClient.getQueriesData({
+      predicate: (query) =>
+        query.queryKey[0] === "root-sidebar-pages" ||
+        query.queryKey[0] === "sidebar-pages",
+    });
+
+    allSideBarMatches.forEach(([key]) => {
+      queryClient.setQueryData<InfiniteData<IPagination<IPage>>>(key, (old) => {
+        if (!old) return old;
+        return {
+          ...old,
+          pages: old.pages.map((page) => ({
+            ...page,
+            items: page.items.map((item) =>
+              item.id === newParentId ? { ...item, hasChildren: true } : item,
+            ),
+          })),
+        };
+      });
+    });
+  }
 }
 
 export function invalidateOnDeletePage(pageId: string) {