diff --git a/web/app/components/plugins/plugin-detail-panel/model-list.tsx b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
index 2704ea741f..7980920119 100644
--- a/web/app/components/plugins/plugin-detail-panel/model-list.tsx
+++ b/web/app/components/plugins/plugin-detail-panel/model-list.tsx
@@ -1,19 +1,14 @@
 import React from 'react'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import { usePluginPageContext } from '@/app/components/plugins/plugin-page/context'
 import ModelIcon from '@/app/components/header/account-setting/model-provider-page/model-icon'
 import ModelName from '@/app/components/header/account-setting/model-provider-page/model-name'
-import { fetchModelProviderModelList } from '@/service/common'
+import { useModelProviderModelList } from '@/service/use-models'
 
 const ModelList = () => {
   const { t } = useTranslation()
   const currentPluginDetail = usePluginPageContext(v => v.currentPluginDetail)
-
-  const { data: res } = useSWR(
-    `/workspaces/current/model-providers/${currentPluginDetail.plugin_id}/${currentPluginDetail.name}/models`,
-    fetchModelProviderModelList,
-  )
+  const { data: res } = useModelProviderModelList(`${currentPluginDetail.plugin_id}/${currentPluginDetail.name}`)
 
   if (!res)
     return null
diff --git a/web/service/use-models.ts b/web/service/use-models.ts
new file mode 100644
index 0000000000..84122cdd1f
--- /dev/null
+++ b/web/service/use-models.ts
@@ -0,0 +1,17 @@
+import { get } from './base'
+import type {
+  ModelItem,
+} from '@/app/components/header/account-setting/model-provider-page/declarations'
+import {
+  useQuery,
+  // useQueryClient,
+} from '@tanstack/react-query'
+
+const NAME_SPACE = 'models'
+
+export const useModelProviderModelList = (provider: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'model-list', provider],
+    queryFn: () => get<{ data: ModelItem[] }>(`/workspaces/current/model-providers/${provider}/models`),
+  })
+}