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

[lyzno1]

Summary

Fixes #30230

Screenshots

Before	After
...	...

Checklist

• This change requires a documentation update, included: Dify Document
• I understand that this PR may be closed in case there was no previous discussion or issues. (This doesn't apply to typos!)
• I've added a test for each change that was introduced, and I tried as much as possible to make a single atomic change.
• I've updated the documentation accordingly.
• I ran dev/reformat(backend) and cd web && npx lint-staged(frontend) to appease the lint gods

[lyzno1]

/gemini summary

[lyzno1]

/gemini review

[gemini-code-assist]

Summary of Changes

This pull request undertakes a significant refactoring effort to standardize the data fetching strategy across the web frontend. It systematically replaces all instances and dependencies on the SWR library with Tanstack Query, particularly within the share and chat functionalities. This migration aims to improve consistency, maintainability, and potentially performance by leveraging Tanstack Query's robust caching and state management capabilities.

Highlights

• SWR Removal & Tanstack Query Adoption: The swr library has been completely removed from the project's dependencies and replaced with @tanstack/react-query for data fetching.
• Centralized Share Hooks: New Tanstack Query hooks for share-related functionalities (conversations, chat lists, conversation naming) have been introduced in web/service/use-share.ts, centralizing data fetching logic.
• Chat Component Migration: The useChatWithHistory and useEmbeddedChatbot hooks have been refactored to utilize the new Tanstack Query hooks, standardizing their data management.
• Initializer Renaming & Cleanup: The SwrInitializer component has been renamed to AppInitializer and its SWR-specific configuration and imports have been removed, streamlining the application's initialization process.
• Updated Development Scripts & Documentation: Internal development scripts and documentation related to component analysis and refactoring guidelines have been updated to reflect the shift from SWR to Tanstack Query.

🧠 New Feature in Public Preview: You can now enable Memory to help Gemini Code Assist learn from your team's feedback. This makes future code reviews more consistent and personalized to your project's style. Click here to enable Memory in your admin console.

Changelog

• .claude/skills/component-refactoring/SKILL.md
  • Removed the specific mention of "Project is migrating from SWR to React Query" from the Dify Convention for data hooks.
• web/app/(commonLayout)/layout.tsx
  • Replaced SwrInitializer import with AppInitializer.
  • Replaced the SwrInitializer component with AppInitializer in the JSX.
• web/app/account/(commonLayout)/layout.tsx
  • Replaced SwrInitor import with AppInitializer.
  • Replaced the SwrInitor component with AppInitializer in the JSX.
• web/app/components/base/chat/chat-with-history/hooks.spec.tsx
  • Added a new test file for useChatWithHistory hooks, including tests for share queries, new conversation completion, chat list gating, and conversation ID persistence, all using @tanstack/react-query.
• web/app/components/base/chat/chat-with-history/hooks.tsx
  • Removed useSWR import.
  • Replaced fetchChatList, fetchConversations, and generationConversationName imports with new Tanstack Query hooks (useShareConversations, useShareChatList, useShareConversationName, useInvalidateShareConversations) from web/service/use-share.
  • Migrated data fetching logic for pinned conversations, unpinned conversations, and chat lists from useSWR to their respective useShare* Tanstack Query hooks.
  • Replaced mutateAppConversationData and mutateAppPinnedConversationData calls with invalidateShareConversations().
• web/app/components/base/chat/embedded-chatbot/hooks.spec.tsx
  • Added a new test file for useEmbeddedChatbot hooks, including tests for share queries, new conversation completion, chat list gating, and conversation ID persistence, all using @tanstack/react-query.
• web/app/components/base/chat/embedded-chatbot/hooks.tsx
  • Removed useSWR import.
  • Replaced fetchChatList, fetchConversations, and generationConversationName imports with new Tanstack Query hooks (useShareConversations, useShareChatList, useShareConversationName, useInvalidateShareConversations) from web/service/use-share.
  • Migrated data fetching logic for pinned conversations, unpinned conversations, and chat lists from useSWR to their respective useShare* Tanstack Query hooks.
  • Replaced mutateAppConversationData calls with invalidateShareConversations().
• web/app/components/swr-initializer.tsx
  • File renamed to web/app/components/app-initializer.tsx.
  • Removed SWRConfig import and usage.
  • Removed export default SwrInitializer.
  • Renamed SwrInitializerProps to AppInitializerProps and SwrInitializer to AppInitializer.
• web/knip.config.ts
  • Updated the entry for the initializer component from swr-initializer.tsx to app-initializer.tsx.
• web/package.json
  • Removed the swr dependency.
• web/pnpm-lock.yaml
  • Removed all entries related to the swr package.
• web/scripts/analyze-component.js
  • Removed the hasSWR feature detection.
  • Updated API call mocking suggestions to remove useSWR and include useMutation.
• web/scripts/component-analyzer.js
  • Removed hasSWR property from the analysis result.
  • Updated hasAPI detection to include hasReactQuery instead of useSWR.
  • Refined hasReactQuery detection to include various useQuery variants.
• web/scripts/refactor-component.js
  • Removed the hasSWR check and the corresponding migration suggestion.
  • Updated refactoring guidelines to simply state "Use React Query for data fetching" instead of "not SWR".
  • Removed the specific action item "MIGRATE SWR TO REACT QUERY".
• web/service/annotation.ts
  • Removed Fetcher type import from swr.
  • Updated annotationBatchImport and checkAnnotationBatchImportProgress function signatures to remove Fetcher type annotations.
• web/service/apps.ts
  • Updated comment for fetchAppDetailDirect from "non-SWR usage" to "one-off usage".
• web/service/plugins.ts
  • Removed Fetcher type import from swr.
  • Updated fetchMarketplaceCollections and fetchMarketplaceCollectionPlugins function signatures to remove Fetcher type annotations.
• web/service/use-share.ts
  • Introduced shareQueryKeys for consistent query key management.
  • Added useShareConversations hook for fetching conversation lists (pinned and unpinned).
  • Added useShareChatList hook for fetching chat messages for a specific conversation.
  • Added useShareConversationName hook for generating conversation names.
  • Added useInvalidateShareConversations hook to invalidate conversation-related queries.
  • Updated useGetWebAppAccessModeByCode, useGetWebAppInfo, useGetWebAppParams, and useGetWebAppMeta to use shareQueryKeys.

Activity

• lyzno1 requested a summary of the pull request.
• lyzno1 requested a review of the pull request.
• gemini-code-assist[bot] provided a review comment suggesting to memoize the useInvalidateShareConversations hook using useCallback and useQueryClient to prevent unnecessary re-renders, highlighting a potential performance issue with the current implementation.

[gemini-code-assist]

Code Review

This pull request is a significant and well-executed refactoring that removes the SWR dependency and migrates the share/chat data fetching logic to TanStack Query. The changes are clean, consistent, and follow best practices for using TanStack Query, such as creating custom hooks and centralized query keys. The addition of comprehensive test suites for the new hooks is commendable and greatly improves the robustness of the codebase.

My review focuses on ensuring the new data fetching logic is sound. I've identified a potential issue in the enabled logic within the newly created use-share.ts hooks, which could lead to race conditions and failed API requests. The proposed fixes will make these hooks more robust. Overall, this is an excellent contribution that modernizes the data fetching layer.

[Copilot]

Pull request overview

Copilot reviewed 18 out of 19 changed files in this pull request and generated 1 comment.

Files not reviewed (1)

• web/pnpm-lock.yaml: Language not supported

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.