diff --git a/web/app/components/workflow-app/components/workflow-main.tsx b/web/app/components/workflow-app/components/workflow-main.tsx
index beaf1521a4..f0b9bab2cf 100644
--- a/web/app/components/workflow-app/components/workflow-main.tsx
+++ b/web/app/components/workflow-app/components/workflow-main.tsx
@@ -7,6 +7,7 @@ import { WorkflowWithInnerContext } from '@/app/components/workflow'
 import type { WorkflowProps } from '@/app/components/workflow'
 import WorkflowChildren from './workflow-children'
 import {
+  useConfigsMap,
   useInspectVarsCrud,
   useNodesSyncDraft,
   useSetWorkflowVarsWithValue,
@@ -65,8 +66,6 @@ const WorkflowMain = ({
   } = useWorkflowStartRun()
   const { fetchInspectVars } = useSetWorkflowVarsWithValue()
   const {
-    conversationVars,
-    systemVars,
     hasNodeInspectVars,
     hasSetInspectVar,
     fetchInspectVarValue,
@@ -82,6 +81,7 @@ const WorkflowMain = ({
     resetConversationVar,
     invalidateConversationVarValues,
   } = useInspectVarsCrud()
+  const configsMap = useConfigsMap()
 
   const hooksStore = useMemo(() => {
     return {
@@ -97,8 +97,6 @@ const WorkflowMain = ({
       handleWorkflowStartRunInChatflow,
       handleWorkflowStartRunInWorkflow,
       fetchInspectVars,
-      conversationVars,
-      systemVars,
       hasNodeInspectVars,
       hasSetInspectVar,
       fetchInspectVarValue,
@@ -113,6 +111,7 @@ const WorkflowMain = ({
       invalidateSysVarValues,
       resetConversationVar,
       invalidateConversationVarValues,
+      configsMap,
     }
   }, [
     syncWorkflowDraftWhenPageClose,
@@ -127,8 +126,6 @@ const WorkflowMain = ({
     handleWorkflowStartRunInChatflow,
     handleWorkflowStartRunInWorkflow,
     fetchInspectVars,
-    conversationVars,
-    systemVars,
     hasNodeInspectVars,
     hasSetInspectVar,
     fetchInspectVarValue,
@@ -143,6 +140,7 @@ const WorkflowMain = ({
     invalidateSysVarValues,
     resetConversationVar,
     invalidateConversationVarValues,
+    configsMap,
   ])
 
   return (
diff --git a/web/app/components/workflow-app/hooks/index.ts b/web/app/components/workflow-app/hooks/index.ts
index a16f1d6f27..1ee7c030b9 100644
--- a/web/app/components/workflow-app/hooks/index.ts
+++ b/web/app/components/workflow-app/hooks/index.ts
@@ -7,3 +7,4 @@ export * from './use-is-chat-mode'
 export * from './use-workflow-refresh-draft'
 export * from './use-fetch-workflow-inspect-vars'
 export * from './use-inspect-vars-crud'
+export * from './use-configs-map'
diff --git a/web/app/components/workflow-app/hooks/use-configs-map.ts b/web/app/components/workflow-app/hooks/use-configs-map.ts
new file mode 100644
index 0000000000..0db4f77856
--- /dev/null
+++ b/web/app/components/workflow-app/hooks/use-configs-map.ts
@@ -0,0 +1,12 @@
+import { useMemo } from 'react'
+import { useStore } from '@/app/components/workflow/store'
+
+export const useConfigsMap = () => {
+  const appId = useStore(s => s.appId)
+  return useMemo(() => {
+    return {
+      conversationVarsUrl: `apps/${appId}/workflows/draft/conversation-variables`,
+      systemVarsUrl: `apps/${appId}/workflows/draft/system-variables`,
+    }
+  }, [appId])
+}
diff --git a/web/app/components/workflow-app/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow-app/hooks/use-inspect-vars-crud.ts
index 43fbc975f0..246240b983 100644
--- a/web/app/components/workflow-app/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow-app/hooks/use-inspect-vars-crud.ts
@@ -4,7 +4,6 @@ import type { ValueSelector } from '@/app/components/workflow/types'
 import type { VarInInspect } from '@/types/workflow'
 import { VarInInspectType } from '@/types/workflow'
 import {
-  useConversationVarValues,
   useDeleteAllInspectorVars,
   useDeleteInspectVar,
   useDeleteNodeInspectorVars,
@@ -13,7 +12,6 @@ import {
   useInvalidateSysVarValues,
   useResetConversationVar,
   useResetToLastRunValue,
-  useSysVarValues,
 } from '@/service/use-workflow'
 import { useCallback } from 'react'
 import { isConversationVar, isENV, isSystemVar } from '@/app/components/workflow/nodes/_base/components/variable/utils'
@@ -21,6 +19,7 @@ import produce from 'immer'
 import type { Node } from '@/app/components/workflow/types'
 import { useNodesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-nodes-interactions-without-sync'
 import { useEdgesInteractionsWithoutSync } from '@/app/components/workflow/hooks/use-edges-interactions-without-sync'
+import { useConfigsMap } from './use-configs-map'
 
 export const useInspectVarsCrud = () => {
   const workflowStore = useWorkflowStore()
@@ -36,13 +35,11 @@ export const useInspectVarsCrud = () => {
     setNodesWithInspectVars,
     resetToLastRunVar: resetToLastRunVarInStore,
   } = workflowStore.getState()
-
-  const { data: conversationVars } = useConversationVarValues(appId)
-  const invalidateConversationVarValues = useInvalidateConversationVarValues(appId)
+  const { conversationVarsUrl, systemVarsUrl } = useConfigsMap()
+  const invalidateConversationVarValues = useInvalidateConversationVarValues(conversationVarsUrl)
   const { mutateAsync: doResetConversationVar } = useResetConversationVar(appId)
   const { mutateAsync: doResetToLastRunValue } = useResetToLastRunValue(appId)
-  const { data: systemVars } = useSysVarValues(appId)
-  const invalidateSysVarValues = useInvalidateSysVarValues(appId)
+  const invalidateSysVarValues = useInvalidateSysVarValues(systemVarsUrl)
 
   const { mutateAsync: doDeleteAllInspectorVars } = useDeleteAllInspectorVars(appId)
   const { mutate: doDeleteNodeInspectorVars } = useDeleteNodeInspectorVars(appId)
@@ -212,9 +209,6 @@ export const useInspectVarsCrud = () => {
   }, [doResetToLastRunValue, invalidateSysVarValues, resetToLastRunVarInStore])
 
   return {
-    conversationVars: conversationVars || [],
-    systemVars: systemVars || [],
-    nodesWithInspectVars,
     hasNodeInspectVars,
     hasSetInspectVar,
     fetchInspectVarValue,
diff --git a/web/app/components/workflow/hooks-store/store.ts b/web/app/components/workflow/hooks-store/store.ts
index 9ef0bbde07..4e8f74c774 100644
--- a/web/app/components/workflow/hooks-store/store.ts
+++ b/web/app/components/workflow/hooks-store/store.ts
@@ -34,8 +34,6 @@ type CommonHooksFnMap = {
   handleWorkflowStartRunInWorkflow: () => void
   handleWorkflowStartRunInChatflow: () => void
   fetchInspectVars: () => Promise<void>
-  conversationVars: VarInInspect[]
-  systemVars: VarInInspect[]
   hasNodeInspectVars: (nodeId: string) => boolean
   hasSetInspectVar: (nodeId: string, name: string, sysVars: VarInInspect[], conversationVars: VarInInspect[]) => boolean
   fetchInspectVarValue: (selector: ValueSelector) => Promise<void>
@@ -50,6 +48,10 @@ type CommonHooksFnMap = {
   invalidateSysVarValues: () => void
   resetConversationVar: (varId: string) => Promise<void>
   invalidateConversationVarValues: () => void
+  configsMap?: {
+    conversationVarsUrl: string
+    systemVarsUrl: string
+  }
 }
 
 export type Shape = {
@@ -69,8 +71,6 @@ export const createHooksStore = ({
   handleWorkflowStartRunInWorkflow = noop,
   handleWorkflowStartRunInChatflow = noop,
   fetchInspectVars = async () => noop(),
-  conversationVars = [],
-  systemVars = [],
   hasNodeInspectVars = () => false,
   hasSetInspectVar = () => false,
   fetchInspectVarValue = async () => noop(),
@@ -100,8 +100,6 @@ export const createHooksStore = ({
     handleWorkflowStartRunInWorkflow,
     handleWorkflowStartRunInChatflow,
     fetchInspectVars,
-    conversationVars,
-    systemVars,
     hasNodeInspectVars,
     hasSetInspectVar,
     fetchInspectVarValue,
diff --git a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
index ce32469e24..50188185c2 100644
--- a/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
+++ b/web/app/components/workflow/hooks/use-inspect-vars-crud.ts
@@ -1,10 +1,15 @@
 import { useStore } from '../store'
 import { useHooksStore } from '@/app/components/workflow/hooks-store'
+import {
+  useConversationVarValues,
+  useSysVarValues,
+} from '@/service/use-workflow'
 
 const useInspectVarsCrud = () => {
   const nodesWithInspectVars = useStore(s => s.nodesWithInspectVars)
-  const conversationVars = useHooksStore(s => s.conversationVars)
-  const systemVars = useHooksStore(s => s.systemVars)
+  const configsMap = useHooksStore(s => s.configsMap)
+  const { data: conversationVars } = useConversationVarValues(configsMap?.conversationVarsUrl)
+  const { data: systemVars } = useSysVarValues(configsMap?.systemVarsUrl)
   const hasNodeInspectVars = useHooksStore(s => s.hasNodeInspectVars)
   const hasSetInspectVar = useHooksStore(s => s.hasSetInspectVar)
   const fetchInspectVarValue = useHooksStore(s => s.fetchInspectVarValue)
@@ -21,8 +26,8 @@ const useInspectVarsCrud = () => {
   const invalidateConversationVarValues = useHooksStore(s => s.invalidateConversationVarValues)
 
   return {
-    conversationVars,
-    systemVars,
+    conversationVars: conversationVars || [],
+    systemVars: systemVars || [],
     nodesWithInspectVars,
     hasNodeInspectVars,
     hasSetInspectVar,
diff --git a/web/service/use-workflow.ts b/web/service/use-workflow.ts
index d9b3332ce7..eb07109857 100644
--- a/web/service/use-workflow.ts
+++ b/web/service/use-workflow.ts
@@ -113,18 +113,19 @@ export const useInvalidAllLastRun = (appId: string) => {
 
 const useConversationVarValuesKey = [NAME_SPACE, 'conversation-variable']
 
-export const useConversationVarValues = (appId: string) => {
+export const useConversationVarValues = (url?: string) => {
   return useQuery({
-    queryKey: [...useConversationVarValuesKey, appId],
+    enabled: !!url,
+    queryKey: [...useConversationVarValuesKey, url],
     queryFn: async () => {
-      const { items } = (await get(`apps/${appId}/workflows/draft/conversation-variables`)) as { items: VarInInspect[] }
+      const { items } = (await get(url || '')) as { items: VarInInspect[] }
       return items
     },
   })
 }
 
-export const useInvalidateConversationVarValues = (appId: string) => {
-  return useInvalid([...useConversationVarValuesKey, appId])
+export const useInvalidateConversationVarValues = (url: string) => {
+  return useInvalid([...useConversationVarValuesKey, url])
 }
 
 export const useResetConversationVar = (appId: string) => {
@@ -146,18 +147,19 @@ export const useResetToLastRunValue = (appId: string) => {
 }
 
 export const useSysVarValuesKey = [NAME_SPACE, 'sys-variable']
-export const useSysVarValues = (appId: string) => {
+export const useSysVarValues = (url?: string) => {
   return useQuery({
-    queryKey: [...useSysVarValuesKey, appId],
+    enabled: !!url,
+    queryKey: [...useSysVarValuesKey, url],
     queryFn: async () => {
-      const { items } = (await get(`apps/${appId}/workflows/draft/system-variables`)) as { items: VarInInspect[] }
+      const { items } = (await get(url || '')) as { items: VarInInspect[] }
       return items
     },
   })
 }
 
-export const useInvalidateSysVarValues = (appId: string) => {
-  return useInvalid([...useSysVarValuesKey, appId])
+export const useInvalidateSysVarValues = (url: string) => {
+  return useInvalid([...useSysVarValuesKey, url])
 }
 
 export const useDeleteAllInspectorVars = (appId: string) => {