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

web/app/components/rag-pipeline/components/rag-pipeline-header/index.tsx

@@ -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])
 

web/app/components/workflow-app/components/workflow-header/index.spec.tsx

@@ -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')
     })
   })
 

web/app/components/workflow-app/components/workflow-header/index.tsx

@@ -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])
 

web/app/components/workflow/header/view-history.tsx

@@ -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 (
     (

web/service/use-workflow.ts

@@ -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) => {

web/service/workflow.ts

@@ -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 fetchCurrentValueOfConversationVariable = ({
-export const updateWorkflowDraftFromDSL = (appId: string, data: string) => {
+  url,
-  return post<FetchWorkflowDraftResponse>(`apps/${appId}/workflows/draft/import`, { body: { data } })
+  params,
-}
+}: {
-
-export const fetchCurrentValueOfConversationVariable: Fetcher<ConversationVariableResponse, {
   url: string
   params: { conversation_id: string }
-}> = ({ url, params }) => {
+}) => {
   return get<ConversationVariableResponse>(url, { params })
 }