refactor(web): drop swr and migrate share/chat hooks to tanstack query (#30232)

Co-authored-by: Joel <iamjoel007@gmail.com>

web/scripts/analyze-component.js

@@ -46,7 +46,6 @@ Features Detected:
   ${analysis.hasEvents ? '✓' : '✗'} Event handlers
   ${analysis.hasRouter ? '✓' : '✗'} Next.js routing
   ${analysis.hasAPI ? '✓' : '✗'} API calls
-  ${analysis.hasSWR ? '✓' : '✗'} SWR data fetching
   ${analysis.hasReactQuery ? '✓' : '✗'} React Query
   ${analysis.hasAhooks ? '✓' : '✗'} ahooks
   ${analysis.hasForwardRef ? '✓' : '✗'} Ref forwarding (forwardRef)
@@ -236,7 +235,7 @@ Create the test file at: ${testPath}
     // ===== API Calls =====
     if (analysis.hasAPI) {
       guidelines.push('🌐 API calls detected:')
-      guidelines.push('   - Mock API calls/hooks (useSWR, useQuery, fetch, etc.)')
+      guidelines.push('   - Mock API calls/hooks (useQuery, useMutation, fetch, etc.)')
       guidelines.push('   - Test loading, success, and error states')
       guidelines.push('   - Focus on component behavior, not the data fetching lib')
     }

web/scripts/component-analyzer.js

@@ -21,6 +21,7 @@ export class ComponentAnalyzer {
     const resolvedPath = absolutePath ?? path.resolve(process.cwd(), filePath)
     const fileName = path.basename(filePath, path.extname(filePath))
     const lineCount = code.split('\n').length
+    const hasReactQuery = /\buse(?:Query|Queries|InfiniteQuery|SuspenseQuery|SuspenseInfiniteQuery|Mutation)\b/.test(code)
 
     // Calculate complexity metrics
     const { total: rawComplexity, max: rawMaxComplexity } = this.calculateCognitiveComplexity(code)
@@ -44,14 +45,13 @@ export class ComponentAnalyzer {
       hasMemo: code.includes('useMemo'),
       hasEvents: /on[A-Z]\w+/.test(code),
       hasRouter: code.includes('useRouter') || code.includes('usePathname'),
-      hasAPI: code.includes('service/') || code.includes('fetch(') || code.includes('useSWR'),
+      hasAPI: code.includes('service/') || code.includes('fetch(') || hasReactQuery,
       hasForwardRef: code.includes('forwardRef'),
       hasComponentMemo: /React\.memo|memo\(/.test(code),
       hasSuspense: code.includes('Suspense') || /\blazy\(/.test(code),
       hasPortal: code.includes('createPortal'),
       hasImperativeHandle: code.includes('useImperativeHandle'),
-      hasSWR: code.includes('useSWR'),
-      hasReactQuery: code.includes('useQuery') || code.includes('useMutation'),
+      hasReactQuery,
       hasAhooks: code.includes('from \'ahooks\''),
       complexity,
       maxComplexity,

web/scripts/refactor-component.js

@@ -123,7 +123,6 @@ Usage:               ${analysis.usageCount} reference${analysis.usageCount !== 1
   ${analysis.hasRouter ? '✓' : '✗'} Next.js routing
   ${analysis.hasAPI ? '✓' : '✗'} API calls
   ${analysis.hasReactQuery ? '✓' : '✗'} React Query
-  ${analysis.hasSWR ? '✓' : '✗'} SWR (should migrate to React Query)
   ${analysis.hasAhooks ? '✓' : '✗'} ahooks
 ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
 
@@ -150,7 +149,7 @@ ${this.buildRequirements(analysis)}
 
 Follow Dify project conventions:
 - Place extracted hooks in \`hooks/\` subdirectory or as \`use-<feature>.ts\`
-- Use React Query (\`@tanstack/react-query\`) for data fetching, not SWR
+- Use React Query (\`@tanstack/react-query\`) for data fetching
 - Follow existing patterns in \`web/service/use-*.ts\` for API hooks
 - Keep each new file under 300 lines
 - Maintain TypeScript strict typing
@@ -173,12 +172,8 @@ After refactoring, verify:
     }
 
     // Priority 2: Extract API/data logic
-    if (analysis.hasAPI && (analysis.hasEffects || analysis.hasSWR)) {
-      if (analysis.hasSWR) {
-        actions.push('🔄 MIGRATE SWR TO REACT QUERY: Replace useSWR with useQuery from @tanstack/react-query')
-      }
+    if (analysis.hasAPI)
       actions.push('🌐 EXTRACT DATA HOOK: Move API calls and data fetching logic into a dedicated hook using React Query')
-    }
 
     // Priority 3: Split large components
     if (analysis.lineCount > 300) {