fix: optimistic delete for developer apps

Remove the app from the list immediately on delete click rather than
waiting for the API response. Restores previous state on error.

Moves list update from onSuccess to onMutate (with cancelQueries to
avoid race conditions) and adds onError rollback.

Author: dylanjeffers

packages/common/src/api/tan-query/developer-apps/useDeleteDeveloperApp.ts

@@ -3,9 +3,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query'
 
 import { useQueryContext } from '~/api/tan-query/utils'
 import { DeveloperApp } from '~/schemas/developerApps'
-
 import { useCurrentUserId } from '../users/account/useCurrentUserId'
-
 import { getDeveloperAppsQueryKey } from './useDeveloperApps'
 
 export const useDeleteDeveloperApp = () => {
@@ -19,24 +17,32 @@ export const useDeleteDeveloperApp = () => {
         throw new Error('No current user ID')
       }
       const sdk = await audiusSdk()
-
       await sdk.developerApps.deleteDeveloperApp({
         userId: Id.parse(currentUserId),
         address: apiKey
       })
       return {}
     },
-    onSuccess: (_response, apiKey) => {
-      if (!currentUserId) {
-        throw new Error('No current user ID')
-      }
+    onMutate: async (apiKey) => {
+      if (!currentUserId) return
+      const queryKey = getDeveloperAppsQueryKey(currentUserId)
+      await queryClient.cancelQueries({ queryKey })
+      const previousApps = queryClient.getQueryData<DeveloperApp[]>(queryKey)
       queryClient.setQueryData(
-        getDeveloperAppsQueryKey(currentUserId),
+        queryKey,
         (oldData: DeveloperApp[] | undefined) => {
           if (!oldData) return []
           return oldData.filter((app) => app.apiKey !== apiKey)
         }
       )
+      return { previousApps }
+    },
+    onError: (_error, _apiKey, context) => {
+      if (!currentUserId || !context?.previousApps) return
+      queryClient.setQueryData(
+        getDeveloperAppsQueryKey(currentUserId),
+        context.previousApps
+      )
     }
   })
 }