fix: Fix a timing issue when deleting a branch (supabase#30736)

* Add a timeout for invalidating the branch list queries. Add an optimistic deletion from the query cache when deleting a branch.

* Don't refetch the branches list if one of the branches is faulty. The branch will be updated via useBranchQuery.

Author: ivasilov

apps/studio/components/interfaces/BranchManagement/BranchManagement.tsx

@@ -78,25 +78,7 @@ const BranchManagement = () => {
     isLoading: isLoadingBranches,
     isError: isErrorBranches,
     isSuccess: isSuccessBranches,
-  } = useBranchesQuery(
-    { projectRef },
-    {
-      refetchInterval(data) {
-        if (
-          data?.some(
-            (branch) =>
-              branch.status === 'CREATING_PROJECT' ||
-              branch.status === 'RUNNING_MIGRATIONS' ||
-              branch.status === 'MIGRATIONS_FAILED'
-          )
-        ) {
-          return 1000 * 3 // 3 seconds
-        }
-
-        return false
-      },
-    }
-  )
+  } = useBranchesQuery({ projectRef })
   const [[mainBranch], previewBranchesUnsorted] = partition(branches, (branch) => branch.is_default)
   const previewBranches = previewBranchesUnsorted.sort((a, b) =>
     new Date(a.updated_at) < new Date(b.updated_at) ? 1 : -1

apps/studio/data/branches/branch-delete-mutation.ts

@@ -3,6 +3,7 @@ import { toast } from 'sonner'
 
 import { del, handleError } from 'data/fetchers'
 import type { ResponseError } from 'types'
+import { BranchesData } from './branches-query'
 import { branchKeys } from './keys'
 
 export type BranchDeleteVariables = {
@@ -35,7 +36,18 @@ export const useBranchDeleteMutation = ({
     {
       async onSuccess(data, variables, context) {
         const { projectRef } = variables
-        await queryClient.invalidateQueries(branchKeys.list(projectRef))
+        setTimeout(() => {
+          queryClient.invalidateQueries(branchKeys.list(projectRef))
+        }, 5000)
+
+        const branches: BranchesData | undefined = queryClient.getQueryData(
+          branchKeys.list(projectRef)
+        )
+        if (branches) {
+          const updatedBranches = branches.filter((branch) => branch.id !== variables.id)
+          queryClient.setQueryData(branchKeys.list(projectRef), updatedBranches)
+        }
+
         await onSuccess?.(data, variables, context)
       },
       async onError(data, variables, context) {