calypso/docs/DATASET-CACHE-FIX.md

Dataset Cache Invalidation Fix

Issue

Datasets were not automatically refreshing in the UI after create/delete operations:

• Creating a dataset: Dataset created in OS but not shown in UI until manual refresh
• Deleting a dataset: Dataset deleted from OS but still showing in UI until manual refresh

Root Cause

The React Query cache invalidation logic was overly complex with:

1. Multiple invalidation strategies (removeQueries, invalidateQueries, refetchQueries)
2. Manual refresh triggers with complex state management
3. Race conditions between cache removal and refetch
4. Delays and multiple refetch attempts

This created inconsistent behavior where the cache wasn't properly updated.

Solution

Simplified the cache invalidation to use React Query's built-in mechanism:

Before (Complex)

\\ ypescript onSuccess: async (_, variables) => { // Multiple cache operations queryClient.removeQueries(...) await queryClient.invalidateQueries(...) await new Promise(resolve => setTimeout(resolve, 500)) await queryClient.refetchQueries(...) setDatasetRefreshTrigger(...) // Manual trigger // More refetch attempts... } \\

After (Simple)

\\ ypescript onSuccess: async (_, variables) => { setExpandedPools(prev => new Set(prev).add(variables.poolId)) await queryClient.invalidateQueries({ queryKey: ['storage', 'zfs', 'pools', variables.poolId, 'datasets'] }) await queryClient.refetchQueries({ queryKey: ['storage', 'zfs', 'pools', variables.poolId, 'datasets'] }) } \\

Changes Made

1. Simplified createDataset Mutation

File: rontend/src/pages/Storage.tsx (line 256-267)

• Removed complex cache removal logic
• Removed refresh trigger state updates
• Removed delays
• Simplified to: invalidate → refetch

2. Simplified deleteDataset Mutation

File: rontend/src/pages/Storage.tsx (line 274-285)

• Same simplification as createDataset
• Removed 62 lines of complex cache logic
• Reduced from ~60 lines to 8 lines

3. Removed Unused State

• Removed datasetRefreshTrigger state variable (line 175)
• Removed efreshTrigger prop from DatasetRows component (line 633)

Technical Details

Why This Works Better

1. invalidateQueries: Marks the query as stale
2. refetchQueries: Immediately fetches fresh data from API
3. No race conditions: Operations happen in order
4. No manual triggers: React Query handles cache automatically
5. Consistent behavior: Same logic for create and delete

React Query Best Practices

• Use invalidateQueries to mark data as stale
• Use efetchQueries to immediately get fresh data
• Let React Query manage the cache lifecycle
• Avoid manual emoveQueries unless necessary
• Don't use setTimeout for synchronization

Testing

After the fix:

1. ✅ Create dataset → Immediately appears in UI
2. ✅ Delete dataset → Immediately removed from UI
3. ✅ No manual refresh needed
4. ✅ Build successful (9.99s)
5. ✅ No TypeScript errors

Files Modified

• rontend/src/pages/Storage.tsx
  • Lines reduced: ~120 lines → ~60 lines in mutation logic
  • Complexity reduced: High → Low
  • Maintainability: Improved

Backup

Original file backed up to: rontend/src/pages/Storage.tsx.backup

---

Date: 2025-12-25 Status: ✅ Fixed and Tested Build: ✅ Successful Impact: Dataset UI now updates immediately on create/delete