langgenius/dify
1
0
Fork 0
mirror of https://github.com/langgenius/dify.git synced 2026-07-19 00:04:35 -04:00
Code Issues 775 Packages Projects Releases 10 Wiki Activity

[PR #30868] refactor(web): Replace mutateAsync with mutate for proper error handling #30813 #32995

New Issue
Closed
opened 2026-02-21 20:52:28 -05:00 by yindo · 0 comments
yindo commented 2026-02-21 20:52:28 -05:00
Owner
Copy Link
Copy Source

Original Pull Request: https://github.com/langgenius/dify/pull/30868

State: closed
Merged: No

Description

This PR refactors React Query mutations to replace mutateAsync with mutate + callbacks, following TkDodo's recommendations for proper error handling in React Query.

Resolves #30813

Problem

Several places in the codebase were using mutateAsync without proper error handling (no try-catch), which led to:

  • Unhandled Promise Rejections in console
  • Poor UX: Users don't see error feedback when requests fail
  • Inconsistent state: UI may remain in loading state after failure

Solution

Replaced mutateAsync with mutate + callbacks (onSuccess and onError) in all affected files. This ensures:

  • ✅ React Query internally catches errors, preventing unhandled promise rejections
  • ✅ Proper error handling with Toast notifications for user feedback
  • ✅ Consistent error handling pattern across the codebase

Changes

Files Modified (8 files):

  1. web/app/components/tools/mcp/create-card.tsx

    • Replace mutateAsync: createMCP with mutate: createMCP
    • Add onSuccess and onError callbacks

  2. web/app/components/header/account-dropdown/index.tsx

    • Replace mutateAsync: logout with mutate: logout
    • Move logout logic to onSuccess callback
    • Add error handling with Toast

  3. web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts

    • Replace mutateAsync with mutate
    • Add callbacks for success and error handling

  4. web/app/components/datasets/metadata/hooks/use-metadata-document.ts

    • Replace mutateAsync and mutateAsync: doAddMetaData with mutate
    • Update handleAddMetaData and handleSave to use callbacks

  5. web/app/education-apply/hooks.ts

    • Replace mutateAsync().then() pattern with mutate + callbacks
    • Fix both handleUpdateSchools and handleVerify functions

  6. web/app/account/(commonLayout)/avatar.tsx

    • Replace mutateAsync: logout with mutate: logout
    • Add proper error handling

  7. web/app/education-apply/user-info.tsx

    • Replace mutateAsync: logout with mutate: logout
    • Add Toast import and error handling

  8. web/app/components/app-initializer.tsx

    • Fix unhandled promise rejections in async IIFE
    • Improve error handling for Response objects
    • Add comprehensive error catching

Testing

  • All files pass TypeScript type checking
  • No linting errors
  • Error handling verified with Toast notifications
  • No unhandled promise rejections in console

References

Contribution by Gittensor, see my contribution statistics at https://gittensor.io/miners/details?githubId=158349177

**Original Pull Request:** https://github.com/langgenius/dify/pull/30868 **State:** closed **Merged:** No --- ## Description This PR refactors React Query mutations to replace `mutateAsync` with `mutate` + callbacks, following TkDodo's recommendations for proper error handling in React Query. Resolves #30813 ## Problem Several places in the codebase were using `mutateAsync` without proper error handling (no try-catch), which led to: - **Unhandled Promise Rejections** in console - **Poor UX**: Users don't see error feedback when requests fail - **Inconsistent state**: UI may remain in loading state after failure ## Solution Replaced `mutateAsync` with `mutate` + callbacks (`onSuccess` and `onError`) in all affected files. This ensures: - ✅ React Query internally catches errors, preventing unhandled promise rejections - ✅ Proper error handling with Toast notifications for user feedback - ✅ Consistent error handling pattern across the codebase ## Changes ### Files Modified (8 files): 1. **`web/app/components/tools/mcp/create-card.tsx`** - Replace `mutateAsync: createMCP` with `mutate: createMCP` - Add `onSuccess` and `onError` callbacks 2. **`web/app/components/header/account-dropdown/index.tsx`** - Replace `mutateAsync: logout` with `mutate: logout` - Move logout logic to `onSuccess` callback - Add error handling with Toast 3. **`web/app/components/plugins/plugin-page/plugin-tasks/hooks.ts`** - Replace `mutateAsync` with `mutate` - Add callbacks for success and error handling 4. **`web/app/components/datasets/metadata/hooks/use-metadata-document.ts`** - Replace `mutateAsync` and `mutateAsync: doAddMetaData` with `mutate` - Update `handleAddMetaData` and `handleSave` to use callbacks 5. **`web/app/education-apply/hooks.ts`** - Replace `mutateAsync().then()` pattern with `mutate` + callbacks - Fix both `handleUpdateSchools` and `handleVerify` functions 6. **`web/app/account/(commonLayout)/avatar.tsx`** - Replace `mutateAsync: logout` with `mutate: logout` - Add proper error handling 7. **`web/app/education-apply/user-info.tsx`** - Replace `mutateAsync: logout` with `mutate: logout` - Add Toast import and error handling 8. **`web/app/components/app-initializer.tsx`** - Fix unhandled promise rejections in async IIFE - Improve error handling for Response objects - Add comprehensive error catching ## Testing - [x] All files pass TypeScript type checking - [x] No linting errors - [x] Error handling verified with Toast notifications - [x] No unhandled promise rejections in console ## References - [TkDodo's Blog: Mastering Mutations in React Query](https://tkdodo.eu/blog/mastering-mutations-in-react-query) - [TanStack Query Docs: Mutations](https://tanstack.com/query/latest/docs/framework/react/guides/mutations) --- Contribution by Gittensor, see my contribution statistics at https://gittensor.io/miners/details?githubId=158349177
yindo added the pull-request label 2026-02-21 20:52:28 -05:00
yindo closed this issue 2026-02-21 20:52:28 -05:00
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
Knowledge Pipeline
Proposal
WIP
cloud
dependencies
feat:webapp
good first issue
outdated
performance
pull-request
Mirrored from GitHub Pull Request
 python:uv
refactor
size:L
stale
status: accepting prs
status: blocked
status: in discussion
stt & tts
vulnerablity
web
wont-fix
🌊 feat:workflow
🌚 invalid
🐞 bug
👻 feat:rag
💪 enhancement
📚 documentation
🔨 feat:tools
🙋‍♂️ question
🙏 help wanted
🤔 cant-reproduce
🤖 feat:agent
No Label pull-request
Milestone
No items
No Milestone
Projects
Clear projects
No project
Assignees
Clear assignees
yindo
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: langgenius/dify#32995
Delete Branch "%!s()"

Deleting a branch is permanent. Although the deleted branch may continue to exist for a short time before it actually gets removed, it CANNOT be undone in most cases. Continue?