fix: update refresh logic for plugin list to avoid redundant request and fix model provider list update issue in settings (#14152)

web/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list.tsx

@@ -23,17 +23,15 @@ const useRefreshPluginList = () => {
       // installed list
       invalidateInstalledPluginList()
 
-      if (!manifest) return
-
       // tool page, tool select
-      if (PluginType.tool.includes(manifest.category) || refreshAllType) {
+      if ((manifest && PluginType.tool.includes(manifest.category)) || refreshAllType) {
         invalidateAllToolProviders()
         invalidateAllBuiltInTools()
         // TODO: update suggested tools. It's a function in hook useMarketplacePlugins,handleUpdatePlugins
       }
 
       // model select
-      if (PluginType.model.includes(manifest.category) || refreshAllType) {
+      if ((manifest && PluginType.model.includes(manifest.category)) || refreshAllType) {
         refreshModelProviders()
         refetchLLMModelList()
         refetchEmbeddingModelList()
@@ -41,7 +39,7 @@ const useRefreshPluginList = () => {
       }
 
       // agent select
-      if (PluginType.agent.includes(manifest.category) || refreshAllType)
+      if ((manifest && PluginType.agent.includes(manifest.category)) || refreshAllType)
         invalidateStrategyProviders()
     },
   }

web/service/use-plugins.ts

@@ -1,4 +1,4 @@
-import { useCallback } from 'react'
+import { useCallback, useEffect } from 'react'
 import type {
   ModelProvider,
 } from '@/app/components/header/account-setting/model-provider-page/declarations'
@@ -39,6 +39,7 @@ import { useInvalidateAllBuiltInTools } from './use-tools'
 import usePermission from '@/app/components/plugins/plugin-page/use-permission'
 import { uninstallPlugin } from '@/service/plugins'
 import useRefreshPluginList from '@/app/components/plugins/install-plugin/hooks/use-refresh-plugin-list'
+import { cloneDeep } from 'lodash-es'
 
 const NAME_SPACE = 'plugins'
 
@@ -383,6 +384,7 @@ export const usePluginTaskList = (category?: PluginType) => {
   const {
     data,
     isFetched,
+    isRefetching,
     refetch,
     ...rest
   } = useQuery({
@@ -392,16 +394,24 @@ export const usePluginTaskList = (category?: PluginType) => {
     refetchInterval: (lastQuery) => {
       const lastData = lastQuery.state.data
       const taskDone = lastData?.tasks.every(task => task.status === TaskStatus.success || task.status === TaskStatus.failed)
+      return taskDone ? false : 5000
+    },
+  })
+
+  useEffect(() => {
+    // After first fetch, refresh plugin list each time all tasks are done
+    if (!isRefetching) {
+      const lastData = cloneDeep(data)
+      const taskDone = lastData?.tasks.every(task => task.status === TaskStatus.success || task.status === TaskStatus.failed)
       const taskAllFailed = lastData?.tasks.every(task => task.status === TaskStatus.failed)
       if (taskDone) {
         if (lastData?.tasks.length && !taskAllFailed)
           refreshPluginList(category ? { category } as any : undefined, !category)
-        return false
       }
+    }
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isRefetching])
 
-      return 5000
-    },
-  })
   const handleRefetch = useCallback(() => {
     refetch()
   }, [refetch])