refactor(web): migrate workflow run history from useSWR to TanStack Query (#30077)

This commit is contained in:
yyh 2025-12-24 18:21:01 +08:00 committed by GitHub
parent 64a14dcdbc
commit 5896bc89f5
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
6 changed files with 19 additions and 45 deletions

View File

@ -8,7 +8,6 @@ import Header from '@/app/components/workflow/header'
import {
useStore,
} from '@/app/components/workflow/store'
import { fetchWorkflowRunHistory } from '@/service/workflow'
import InputFieldButton from './input-field-button'
import Publisher from './publisher'
import RunMode from './run-mode'
@ -21,7 +20,6 @@ const RagPipelineHeader = () => {
const viewHistoryProps = useMemo(() => {
return {
historyUrl: `/rag/pipelines/${pipelineId}/workflow-runs`,
historyFetcher: fetchWorkflowRunHistory,
}
}, [pipelineId])

View File

@ -58,16 +58,12 @@ vi.mock('@/app/components/app/store', () => ({
vi.mock('@/app/components/workflow/header', () => ({
__esModule: true,
default: (props: HeaderProps) => {
const historyFetcher = props.normal?.runAndHistoryProps?.viewHistoryProps?.historyFetcher
const hasHistoryFetcher = typeof historyFetcher === 'function'
return (
<div
data-testid="workflow-header"
data-show-run={String(Boolean(props.normal?.runAndHistoryProps?.showRunButton))}
data-show-preview={String(Boolean(props.normal?.runAndHistoryProps?.showPreviewButton))}
data-history-url={props.normal?.runAndHistoryProps?.viewHistoryProps?.historyUrl ?? ''}
data-has-history-fetcher={String(hasHistoryFetcher)}
>
<button
type="button"
@ -86,11 +82,6 @@ vi.mock('@/app/components/workflow/header', () => ({
},
}))
vi.mock('@/service/workflow', () => ({
__esModule: true,
fetchWorkflowRunHistory: vi.fn(),
}))
vi.mock('@/service/use-workflow', () => ({
__esModule: true,
useResetWorkflowVersionHistory: () => mockResetWorkflowVersionHistory,
@ -127,7 +118,6 @@ describe('WorkflowHeader', () => {
expect(header).toHaveAttribute('data-show-run', 'false')
expect(header).toHaveAttribute('data-show-preview', 'true')
expect(header).toHaveAttribute('data-history-url', '/apps/app-id/advanced-chat/workflow-runs')
expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
})
it('should configure run mode when app is not in advanced chat mode', () => {
@ -142,7 +132,6 @@ describe('WorkflowHeader', () => {
expect(header).toHaveAttribute('data-show-run', 'true')
expect(header).toHaveAttribute('data-show-preview', 'false')
expect(header).toHaveAttribute('data-history-url', '/apps/app-id/workflow-runs')
expect(header).toHaveAttribute('data-has-history-fetcher', 'true')
})
})

View File

@ -8,9 +8,6 @@ import { useShallow } from 'zustand/react/shallow'
import { useStore as useAppStore } from '@/app/components/app/store'
import Header from '@/app/components/workflow/header'
import { useResetWorkflowVersionHistory } from '@/service/use-workflow'
import {
fetchWorkflowRunHistory,
} from '@/service/workflow'
import { useIsChatMode } from '../../hooks'
import ChatVariableTrigger from './chat-variable-trigger'
import FeaturesTrigger from './features-trigger'
@ -33,7 +30,6 @@ const WorkflowHeader = () => {
return {
onClearLogAndMessageModal: handleClearLogAndMessageModal,
historyUrl: isChatMode ? `/apps/${appDetail!.id}/advanced-chat/workflow-runs` : `/apps/${appDetail!.id}/workflow-runs`,
historyFetcher: fetchWorkflowRunHistory,
}
}, [appDetail, isChatMode, handleClearLogAndMessageModal])

View File

@ -1,17 +1,13 @@
import type { Fetcher } from 'swr'
import type { WorkflowRunHistoryResponse } from '@/types/workflow'
import {
RiCheckboxCircleLine,
RiCloseLine,
RiErrorWarningLine,
} from '@remixicon/react'
import { noop } from 'lodash-es'
import {
memo,
useState,
} from 'react'
import { useTranslation } from 'react-i18next'
import useSWR from 'swr'
import { AlertTriangle } from '@/app/components/base/icons/src/vender/line/alertsAndFeedback'
import {
ClockPlay,
@ -30,6 +26,7 @@ import {
useWorkflowStore,
} from '@/app/components/workflow/store'
import { useFormatTimeFromNow } from '@/hooks/use-format-time-from-now'
import { useWorkflowRunHistory } from '@/service/use-workflow'
import { cn } from '@/utils/classnames'
import {
useIsChatMode,
@ -44,13 +41,11 @@ export type ViewHistoryProps = {
withText?: boolean
onClearLogAndMessageModal?: () => void
historyUrl?: string
historyFetcher?: Fetcher<WorkflowRunHistoryResponse, string>
}
const ViewHistory = ({
withText,
onClearLogAndMessageModal,
historyUrl,
historyFetcher,
}: ViewHistoryProps) => {
const { t } = useTranslation()
const isChatMode = useIsChatMode()
@ -68,11 +63,11 @@ const ViewHistory = ({
const { handleBackupDraft } = useWorkflowRun()
const { closeAllInputFieldPanels } = useInputFieldPanel()
const fetcher = historyFetcher ?? (noop as Fetcher<WorkflowRunHistoryResponse, string>)
const shouldFetchHistory = open && !!historyUrl
const {
data,
isLoading,
} = useSWR((open && historyUrl && historyFetcher) ? historyUrl : null, fetcher)
} = useWorkflowRunHistory(historyUrl, shouldFetchHistory)
return (
(

View File

@ -9,6 +9,7 @@ import type {
UpdateWorkflowParams,
VarInInspect,
WorkflowConfigResponse,
WorkflowRunHistoryResponse,
} from '@/types/workflow'
import { useInfiniteQuery, useMutation, useQuery, useQueryClient } from '@tanstack/react-query'
import { del, get, patch, post, put } from './base'
@ -25,6 +26,14 @@ export const useAppWorkflow = (appID: string) => {
})
}
export const useWorkflowRunHistory = (url?: string, enabled = true) => {
return useQuery<WorkflowRunHistoryResponse>({
queryKey: [NAME_SPACE, 'runHistory', url],
queryFn: () => get<WorkflowRunHistoryResponse>(url as string),
enabled: !!url && enabled,
})
}
export const useInvalidateAppWorkflow = () => {
const queryClient = useQueryClient()
return (appID: string) => {

View File

@ -1,14 +1,11 @@
import type { Fetcher } from 'swr'
import type { BlockEnum } from '@/app/components/workflow/types'
import type { CommonResponse } from '@/models/common'
import type { FlowType } from '@/types/common'
import type {
ChatRunHistoryResponse,
ConversationVariableResponse,
FetchWorkflowDraftResponse,
NodesDefaultConfigsResponse,
VarInInspect,
WorkflowRunHistoryResponse,
} from '@/types/workflow'
import { get, post } from './base'
import { getFlowPrefix } from './utils'
@ -24,18 +21,10 @@ export const syncWorkflowDraft = ({ url, params }: {
return post<CommonResponse & { updated_at: number, hash: string }>(url, { body: params }, { silent: true })
}
export const fetchNodesDefaultConfigs: Fetcher<NodesDefaultConfigsResponse, string> = (url) => {
export const fetchNodesDefaultConfigs = (url: string) => {
return get<NodesDefaultConfigsResponse>(url)
}
export const fetchWorkflowRunHistory: Fetcher<WorkflowRunHistoryResponse, string> = (url) => {
return get<WorkflowRunHistoryResponse>(url)
}
export const fetchChatRunHistory: Fetcher<ChatRunHistoryResponse, string> = (url) => {
return get<ChatRunHistoryResponse>(url)
}
export const singleNodeRun = (flowType: FlowType, flowId: string, nodeId: string, params: object) => {
return post(`${getFlowPrefix(flowType)}/${flowId}/workflows/draft/nodes/${nodeId}/run`, { body: params })
}
@ -48,7 +37,7 @@ export const getLoopSingleNodeRunUrl = (flowType: FlowType, isChatFlow: boolean,
return `${getFlowPrefix(flowType)}/${flowId}/${isChatFlow ? 'advanced-chat/' : ''}workflows/draft/loop/nodes/${nodeId}/run`
}
export const fetchPublishedWorkflow: Fetcher<FetchWorkflowDraftResponse, string> = (url) => {
export const fetchPublishedWorkflow = (url: string) => {
return get<FetchWorkflowDraftResponse>(url)
}
@ -68,15 +57,13 @@ export const fetchPipelineNodeDefault = (pipelineId: string, blockType: BlockEnu
})
}
// TODO: archived
export const updateWorkflowDraftFromDSL = (appId: string, data: string) => {
return post<FetchWorkflowDraftResponse>(`apps/${appId}/workflows/draft/import`, { body: { data } })
}
export const fetchCurrentValueOfConversationVariable: Fetcher<ConversationVariableResponse, {
export const fetchCurrentValueOfConversationVariable = ({
url,
params,
}: {
url: string
params: { conversation_id: string }
}> = ({ url, params }) => {
}) => {
return get<ConversationVariableResponse>(url, { params })
}