Refactor apps service toward TanStack Query (#29004)

web/app/components/develop/secret-key/secret-key-modal.tsx

@@ -5,7 +5,7 @@ import {
 import { useTranslation } from 'react-i18next'
 import { RiDeleteBinLine } from '@remixicon/react'
 import { PlusIcon, XMarkIcon } from '@heroicons/react/20/solid'
-import useSWR, { useSWRConfig } from 'swr'
+import useSWR from 'swr'
 import SecretKeyGenerateModal from './secret-key-generate'
 import s from './style.module.css'
 import ActionButton from '@/app/components/base/action-button'
@@ -15,7 +15,6 @@ import CopyFeedback from '@/app/components/base/copy-feedback'
 import {
   createApikey as createAppApikey,
   delApikey as delAppApikey,
-  fetchApiKeysList as fetchAppApiKeysList,
 } from '@/service/apps'
 import {
   createApikey as createDatasetApikey,
@@ -27,6 +26,7 @@ import Loading from '@/app/components/base/loading'
 import Confirm from '@/app/components/base/confirm'
 import useTimestamp from '@/hooks/use-timestamp'
 import { useAppContext } from '@/context/app-context'
+import { useAppApiKeys, useInvalidateAppApiKeys } from '@/service/use-apps'
 
 type ISecretKeyModalProps = {
   isShow: boolean
@@ -45,12 +45,14 @@ const SecretKeyModal = ({
   const [showConfirmDelete, setShowConfirmDelete] = useState(false)
   const [isVisible, setVisible] = useState(false)
   const [newKey, setNewKey] = useState<CreateApiKeyResponse | undefined>(undefined)
-  const { mutate } = useSWRConfig()
-  const commonParams = appId
-    ? { url: `/apps/${appId}/api-keys`, params: {} }
-    : { url: '/datasets/api-keys', params: {} }
-  const fetchApiKeysList = appId ? fetchAppApiKeysList : fetchDatasetApiKeysList
-  const { data: apiKeysList } = useSWR(commonParams, fetchApiKeysList)
+  const invalidateAppApiKeys = useInvalidateAppApiKeys()
+  const { data: appApiKeys, isLoading: isAppApiKeysLoading } = useAppApiKeys(appId, { enabled: !!appId && isShow })
+  const { data: datasetApiKeys, isLoading: isDatasetApiKeysLoading, mutate: mutateDatasetApiKeys } = useSWR(
+    !appId && isShow ? { url: '/datasets/api-keys', params: {} } : null,
+    fetchDatasetApiKeysList,
+  )
+  const apiKeysList = appId ? appApiKeys : datasetApiKeys
+  const isApiKeysLoading = appId ? isAppApiKeysLoading : isDatasetApiKeysLoading
 
   const [delKeyID, setDelKeyId] = useState('')
 
@@ -64,7 +66,10 @@ const SecretKeyModal = ({
       ? { url: `/apps/${appId}/api-keys/${delKeyID}`, params: {} }
       : { url: `/datasets/api-keys/${delKeyID}`, params: {} }
     await delApikey(params)
-    mutate(commonParams)
+    if (appId)
+      invalidateAppApiKeys(appId)
+    else
+      mutateDatasetApiKeys()
   }
 
   const onCreate = async () => {
@@ -75,7 +80,10 @@ const SecretKeyModal = ({
     const res = await createApikey(params)
     setVisible(true)
     setNewKey(res)
-    mutate(commonParams)
+    if (appId)
+      invalidateAppApiKeys(appId)
+    else
+      mutateDatasetApiKeys()
   }
 
   const generateToken = (token: string) => {
@@ -88,7 +96,7 @@ const SecretKeyModal = ({
         <XMarkIcon className="h-6 w-6 cursor-pointer text-text-tertiary" onClick={onClose} />
       </div>
       <p className='mt-1 shrink-0 text-[13px] font-normal leading-5 text-text-tertiary'>{t('appApi.apiKeyModal.apiSecretKeyTips')}</p>
-      {!apiKeysList && <div className='mt-4'><Loading /></div>}
+      {isApiKeysLoading && <div className='mt-4'><Loading /></div>}
       {
         !!apiKeysList?.data?.length && (
           <div className='mt-4 flex grow flex-col overflow-hidden'>