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

refactor(web): Migrate log module from useSWR to TanStack Query #21244

New Issue
Closed
opened 2026-02-21 20:11:35 -05:00 by yindo · 1 comment
yindo commented 2026-02-21 20:11:35 -05:00
Owner
Copy Link
Copy Source

Originally created by @lyzno1 on GitHub (Dec 23, 2025).

Originally assigned to: @lyzno1 on GitHub.

Summary

Refactor the log module components to use TanStack Query instead of useSWR for state management and data fetching. This aligns with the project's ongoing migration to TanStack Query as the standard data fetching solution.

Background

The project is migrating from useSWR to TanStack Query. Several modules have already been migrated (e.g., use-apps.ts, use-workflow.ts), but the log module still uses useSWR.

Scope

Files to Modify

Components:

  • web/app/components/app/log/filter.tsx - Uses useSWR for annotations count
  • web/app/components/app/log/index.tsx - Uses useSWR for chat/completion conversations
  • web/app/components/app/log/list.tsx - Uses useSWR for conversation details
  • web/app/components/app/annotation/filter.tsx - Uses useSWR for annotations count
  • web/app/components/app/workflow-log/index.tsx - Uses useSWR for workflow logs

Service Layer:

  • Create new file: web/service/use-log.ts

Tests:

  • web/app/components/app/workflow-log/index.spec.tsx
  • web/app/components/app/annotation/filter.spec.tsx

New Hooks to Create

Hook Purpose
useAnnotationsCount Fetch annotation count for an app
useChatConversations Fetch chat conversation list
useCompletionConversations Fetch completion conversation list
useChatConversationDetail Fetch chat conversation detail
useCompletionConversationDetail Fetch completion conversation detail
useChatMessages Fetch chat messages
useWorkflowLogs Fetch workflow logs
useInvalidate* Cache invalidation helpers for each hook

Implementation Notes

  1. Follow the existing pattern in web/service/use-apps.ts and web/service/use-workflow.ts
  2. Use NAME_SPACE constant for query key organization
  3. Use useInvalid and useReset from web/service/use-base.ts
  4. Replace mutate with refetch in component usage
  5. Update tests to mock TanStack Query hooks instead of useSWR

Acceptance Criteria

  • All log module components no longer import from swr
  • New use-log.ts file created with all required hooks
  • All existing tests pass after migration
  • Test files updated to use TanStack Query mocks
  • pnpm type-check:tsgo passes
  • pnpm lint:fix passes with no new errors
Originally created by @lyzno1 on GitHub (Dec 23, 2025). Originally assigned to: @lyzno1 on GitHub. ## Summary Refactor the log module components to use TanStack Query instead of useSWR for state management and data fetching. This aligns with the project's ongoing migration to TanStack Query as the standard data fetching solution. ## Background The project is migrating from useSWR to TanStack Query. Several modules have already been migrated (e.g., `use-apps.ts`, `use-workflow.ts`), but the log module still uses useSWR. ## Scope ### Files to Modify **Components:** - `web/app/components/app/log/filter.tsx` - Uses `useSWR` for annotations count - `web/app/components/app/log/index.tsx` - Uses `useSWR` for chat/completion conversations - `web/app/components/app/log/list.tsx` - Uses `useSWR` for conversation details - `web/app/components/app/annotation/filter.tsx` - Uses `useSWR` for annotations count - `web/app/components/app/workflow-log/index.tsx` - Uses `useSWR` for workflow logs **Service Layer:** - Create new file: `web/service/use-log.ts` **Tests:** - `web/app/components/app/workflow-log/index.spec.tsx` - `web/app/components/app/annotation/filter.spec.tsx` ### New Hooks to Create | Hook | Purpose | |------|---------| | `useAnnotationsCount` | Fetch annotation count for an app | | `useChatConversations` | Fetch chat conversation list | | `useCompletionConversations` | Fetch completion conversation list | | `useChatConversationDetail` | Fetch chat conversation detail | | `useCompletionConversationDetail` | Fetch completion conversation detail | | `useChatMessages` | Fetch chat messages | | `useWorkflowLogs` | Fetch workflow logs | | `useInvalidate*` | Cache invalidation helpers for each hook | ## Implementation Notes 1. Follow the existing pattern in `web/service/use-apps.ts` and `web/service/use-workflow.ts` 2. Use `NAME_SPACE` constant for query key organization 3. Use `useInvalid` and `useReset` from `web/service/use-base.ts` 4. Replace `mutate` with `refetch` in component usage 5. Update tests to mock TanStack Query hooks instead of useSWR ## Acceptance Criteria - [ ] All log module components no longer import from `swr` - [ ] New `use-log.ts` file created with all required hooks - [ ] All existing tests pass after migration - [ ] Test files updated to use TanStack Query mocks - [ ] `pnpm type-check:tsgo` passes - [ ] `pnpm lint:fix` passes with no new errors
yindo closed this issue 2026-02-21 20:11:35 -05:00
yindo commented 2026-02-21 20:11:35 -05:00
Author
Owner
Copy Link
Copy Source

@dosubot[bot] commented on GitHub (Dec 23, 2025):

To migrate the log module from useSWR to TanStack Query, follow the established patterns in use-apps.ts and use-workflow.ts by creating a new web/service/use-log.ts file. This file should wrap the existing fetchers from web/service/log.ts with TanStack Query hooks, using a NAME_SPACE constant for query key organization and exposing cache invalidation helpers via useInvalid and useReset from web/service/use-base.ts (example pattern).

Update all log module components to replace useSWR with these new hooks. Replace all mutate usages with the refetch method returned by TanStack Query (component example). Make sure query keys are arrays starting with the NAME_SPACE and include relevant identifiers and parameters for precise cache segmentation.

For tests, mock the new TanStack Query hooks instead of useSWR, and update assertions to match the new hook signatures and returned objects (e.g., use refetch and isLoading instead of mutate and isValidating) (test example). This ensures all tests pass after migration and maintains coverage for pagination, filtering, and refresh behaviors.

This approach will align the log module with the project's standard for data fetching and state management, improve cache control, and simplify future maintenance.

To reply, just mention @dosu.

How did I do? Good | Irrelevant | Incorrect | Verbose | Hallucination | Report 🐛 | Other

Chat with Dosu Open in Cursor Join Discord Share on X

@dosubot[bot] commented on GitHub (Dec 23, 2025): <!-- Answer --> To migrate the log module from useSWR to TanStack Query, follow the established patterns in `use-apps.ts` and `use-workflow.ts` by creating a new `web/service/use-log.ts` file. This file should wrap the existing fetchers from `web/service/log.ts` with TanStack Query hooks, using a `NAME_SPACE` constant for query key organization and exposing cache invalidation helpers via `useInvalid` and `useReset` from `web/service/use-base.ts` ([example pattern](https://github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/service/use-apps.ts#L22-L121)). Update all log module components to replace `useSWR` with these new hooks. Replace all `mutate` usages with the `refetch` method returned by TanStack Query ([component example](https://github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/app/components/app/log/index.tsx#L44-L147)). Make sure query keys are arrays starting with the `NAME_SPACE` and include relevant identifiers and parameters for precise cache segmentation. For tests, mock the new TanStack Query hooks instead of `useSWR`, and update assertions to match the new hook signatures and returned objects (e.g., use `refetch` and `isLoading` instead of `mutate` and `isValidating`) ([test example](https://github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/app/components/app/workflow-log/index.spec.tsx#L33-L592)). This ensures all tests pass after migration and maintains coverage for pagination, filtering, and refresh behaviors. This approach will align the log module with the project's standard for data fetching and state management, improve cache control, and simplify future maintenance. <!-- Dosu Comment Footer --> *To reply, just mention [@dosu](https://go.dosu.dev/dosubot).* --- <sup>How did I do? [Good](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=great_response) | [Irrelevant](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=irrelevant_answer) | [Incorrect](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=incorrect_sources) | [Verbose](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=too_verbose) | [Hallucination](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=hallucination) | [Report 🐛](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=bug_report) | [Other](https://app.dosu.dev/response-feedback/c614e11a-bd02-40aa-be41-05b6fa962499?feedback_type=other)</sup> [![Chat with Dosu](https://dosu.dev/dosu-chat-badge.svg)](https://app.dosu.dev/6088a4f4-073a-43f3-b3d4-4f06fb0c05a0/ask?utm_source=github)&nbsp;[![Open in Cursor](https://dosu.dev/dosu-in-cursor.svg)](https://cursor.com/link/prompt?text=To%20migrate%20the%20log%20module%20from%20useSWR%20to%20TanStack%20Query%2C%20follow%20the%20established%20patterns%20in%20%60use-apps.ts%60%20and%20%60use-workflow.ts%60%20by%20creating%20a%20new%20%60web/service/use-log.ts%60%20file.%20This%20file%20should%20wrap%20the%20existing%20fetchers%20from%20%60web/service/log.ts%60%20with%20TanStack%20Query%20hooks%2C%20using%20a%20%60NAME_SPACE%60%20constant%20for%20query%20key%20organization%20and%20exposing%20cache%20invalidation%20helpers%20via%20%60useInvalid%60%20and%20%60useReset%60%20from%20%60web/service/use-base.ts%60%C2%A0%28%5Bexample%20pattern%5D%28https%3A//github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/service/use-apps.ts%23L22-L121%29%29.%0A%0AUpdate%20all%20log%20module%20components%20to%20replace%20%60useSWR%60%20with%20these%20new%20hooks.%20Replace%20all%20%60mutate%60%20usages%20with%20the%20%60refetch%60%20method%20returned%20by%20TanStack%20Query%20%28%5Bcomponent%20example%5D%28https%3A//github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/app/components/app/log/index.tsx%23L44-L147%29%29.%20Make%20sure%20query%20keys%20are%20arrays%20starting%20with%20the%20%60NAME_SPACE%60%20and%20include%20relevant%20identifiers%20and%20parameters%20for%20precise%20cache%20segmentation.%0A%0AFor%20tests%2C%20mock%20the%20new%20TanStack%20Query%20hooks%20instead%20of%20%60useSWR%60%2C%20and%20update%20assertions%20to%20match%20the%20new%20hook%20signatures%20and%20returned%20objects%20%28e.g.%2C%20use%20%60refetch%60%20and%20%60isLoading%60%20instead%20of%20%60mutate%60%20and%20%60isValidating%60%29%20%28%5Btest%20example%5D%28https%3A//github.com/langgenius/dify/blob/f439e081b557fade41dbe4f36830c681be21c2bf/web/app/components/app/workflow-log/index.spec.tsx%23L33-L592%29%29.%20This%20ensures%20all%20tests%20pass%20after%20migration%20and%20maintains%20coverage%20for%20pagination%2C%20filtering%2C%20and%20refresh%20behaviors.%0A%0AThis%20approach%20will%20align%20the%20log%20module%20with%20the%20project%27s%20standard%20for%20data%20fetching%20and%20state%20management%2C%20improve%20cache%20control%2C%20and%20simplify%20future%20maintenance.)&nbsp;[![Join Discord](https://img.shields.io/badge/join-5865F2?logo=discord&logoColor=white&label=)](https://go.dosu.dev/discord-bot)&nbsp;[![Share on X](https://img.shields.io/badge/X-share-black)](https://twitter.com/intent/tweet?text=%40dosu_ai%20helped%20me%20solve%20this%20issue!&url=https%3A//github.com/langgenius/dify/issues/30066)
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
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#21244
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?