improvement(tanstack): migrate multiple stores

[icecrasher321]

Summary

Remove unused code + migration KB, Folders, Custom Tools, Settings, Provider stores to tanstack based queries.

Type of Change

• Other: Performance Improvement

Testing

Tested manually

Checklist

• Code follows project style guidelines
• Self-reviewed my changes
• Tests added/updated and passing
• No new warnings introduced
• I confirm that I have read and agree to the terms outlined in the Contributor License Agreement (CLA)

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

1 Skipped Deployment

Project	Deployment	Preview	Comments	Updated (UTC)
docs	Skipped			Nov 14, 2025 11:34pm

[greptile-apps]

Greptile Overview

Greptile Summary

Migrated KB, Folders, Custom Tools, Settings, and Provider stores from Zustand-based API logic to TanStack Query-based hooks, removing 637 net lines of code while improving data fetching patterns.

Key Improvements:

• Implemented proper query key factories for cache management across all migrated stores
• Added optimistic updates with rollback for mutations (folders, custom tools, general settings)
• Configured appropriate stale times (1-5 minutes) based on data volatility
• Extracted API logic into dedicated query hooks in hooks/queries/ directory
• Maintained backward compatibility by syncing TanStack Query cache to Zustand stores via useEffect
• Reduced store complexity by removing API methods, loading states, and error handling from stores

Migration Pattern:

• New query files follow consistent structure: query key factories, fetch functions, query hooks, mutation hooks
• Stores simplified to UI-only state (expansion, selection) or sync targets for queries
• Components updated to use query hooks (useFolders, useCustomTools, etc.) instead of store methods
• Added loader components (ProviderModelsLoader) to sync query data to stores for gradual migration

Technical Quality:

• Proper error handling with try-catch and error states
• Cache invalidation strategies (single query, cross-query for related data)
• Optimistic updates with snapshot/rollback mechanism
• placeholderData: keepPreviousData for smooth transitions

Confidence Score: 5/5

• Safe to merge - well-executed migration with proper patterns, testing, and backward compatibility
• Clean architectural improvement with consistent patterns across all migrations, proper error handling, optimistic updates with rollback, appropriate cache strategies, and maintained backward compatibility through Zustand sync layer
• No files require special attention

Important Files Changed

File Analysis

Filename	Score	Overview
apps/sim/hooks/queries/folders.ts	5/5	migrated folder queries to TanStack Query with proper key factories, mutations, and cache invalidation
apps/sim/hooks/queries/knowledge.ts	5/5	comprehensive knowledge base queries with pagination, optimistic updates, and proper cache management
apps/sim/hooks/queries/custom-tools.ts	5/5	custom tools queries with validation, optimistic updates, and rollback on error
apps/sim/hooks/queries/general-settings.ts	5/5	general settings queries with Zustand sync, optimistic updates, and proper rollback mechanism
apps/sim/hooks/queries/environment.ts	5/5	environment variable queries with workspace/personal scope separation and cross-invalidation
apps/sim/stores/folders/store.ts	5/5	reduced to UI-only state (expansion, selection) with API methods removed per migration
apps/sim/stores/custom-tools/store.ts	5/5	simplified to sync-only store with all API methods removed, acts as cache for queries
apps/sim/hooks/use-knowledge.ts	5/5	migrated to use TanStack queries with proper cache syncing to Zustand for backward compatibility

Sequence Diagram

sequenceDiagram
    participant UI as UI Component
    participant Hook as TanStack Query Hook
    participant API as API Endpoint
    participant Cache as React Query Cache
    participant Store as Zustand Store
    
    Note over UI,Store: Data Fetching Flow
    UI->>Hook: useFolders(workspaceId)
    Hook->>Cache: Check cache (staleTime: 60s)
    alt Cache Hit & Fresh
        Cache-->>Hook: Return cached data
    else Cache Miss or Stale
        Hook->>API: fetch('/api/folders?workspaceId=...')
        API-->>Hook: Return folders array
        Hook->>Cache: Update cache
    end
    Hook->>Store: setFolders(data) via useEffect
    Store-->>UI: Render with data
    
    Note over UI,Store: Mutation Flow (e.g., Update Folder)
    UI->>Hook: updateFolder.mutate({id, updates})
    Hook->>Cache: Cancel outgoing queries
    Hook->>Cache: Optimistic update (onMutate)
    Cache-->>UI: Show optimistic state
    Hook->>API: PUT /api/folders/:id
    alt Success
        API-->>Hook: Updated folder
        Hook->>Cache: Invalidate queries (onSuccess)
        Hook->>Cache: Refetch fresh data
        Cache->>Store: Sync via useEffect
        Store-->>UI: Updated state
    else Error
        API-->>Hook: Error response
        Hook->>Cache: Rollback optimistic update (onError)
        Cache-->>UI: Show previous state
    end

Loading

[greptile-apps]

_{35 files reviewed, no comments}

_{Edit Code Review Agent Settings | Greptile}