refactor: replace SWR with custom hooks for dataset detail and related apps; update context usage in components

web/app/(commonLayout)/datasets/(datasetDetailLayout)/[datasetId]/layout-main.tsx

@@ -2,7 +2,6 @@
 import type { FC } from 'react'
 import React, { useEffect, useMemo } from 'react'
 import { usePathname } from 'next/navigation'
-import useSWR from 'swr'
 import { useTranslation } from 'react-i18next'
 import type { RemixiconComponentType } from '@remixicon/react'
 import {
@@ -16,7 +15,6 @@ import {
 } from '@remixicon/react'
 import { RiInformation2Line } from '@remixicon/react'
 import classNames from '@/utils/classnames'
-import { fetchDatasetDetail, fetchDatasetRelatedApps } from '@/service/datasets'
 import type { RelatedAppResponse } from '@/models/datasets'
 import AppSideBar from '@/app/components/app-sidebar'
 import Loading from '@/app/components/base/loading'
@@ -30,6 +28,7 @@ import LinkedAppsPanel from '@/app/components/base/linked-apps-panel'
 import { PipelineFill, PipelineLine } from '@/app/components/base/icons/src/vender/pipeline'
 import { Divider } from '@/app/components/base/icons/src/vender/knowledge'
 import NoLinkedAppsPanel from '@/app/components/datasets/no-linked-apps-panel'
+import { useDatasetDetail, useDatasetRelatedApps } from '@/service/knowledge/use-dataset'
 
 export type IAppDetailLayoutProps = {
   children: React.ReactNode
@@ -116,15 +115,9 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
 
-  const { data: datasetRes, error, mutate: mutateDatasetRes } = useSWR({
-    url: 'fetchDatasetDetail',
-    datasetId,
-  }, apiParams => fetchDatasetDetail(apiParams.datasetId))
+  const { data: datasetRes, error, refetch: mutateDatasetRes } = useDatasetDetail(datasetId)
 
-  const { data: relatedApps } = useSWR({
-    action: 'fetchDatasetRelatedApps',
-    datasetId,
-  }, apiParams => fetchDatasetRelatedApps(apiParams.datasetId))
+  const { data: relatedApps } = useDatasetRelatedApps(datasetId)
 
   const navigation = useMemo(() => {
     const baseNavigation = [
@@ -169,7 +162,7 @@ const DatasetDetailLayout: FC<IAppDetailLayoutProps> = (props) => {
       <DatasetDetailContext.Provider value={{
         indexingTechnique: datasetRes?.indexing_technique,
         dataset: datasetRes,
-        mutateDatasetRes: () => mutateDatasetRes(),
+        mutateDatasetRes,
       }}>
         {!hideSideBar && (
           <AppSideBar

web/app/components/datasets/create/step-two/index.tsx

@@ -42,7 +42,7 @@ import { isReRankModelSelected } from '@/app/components/datasets/common/check-re
 import Toast from '@/app/components/base/toast'
 import type { NotionPage } from '@/models/common'
 import { DataSourceProvider } from '@/models/common'
-import { useDatasetDetailContext } from '@/context/dataset-detail'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import I18n from '@/context/i18n'
 import { RETRIEVE_METHOD } from '@/types/app'
 import useBreakpoints, { MediaType } from '@/hooks/use-breakpoints'
@@ -150,7 +150,8 @@ const StepTwo = ({
   const media = useBreakpoints()
   const isMobile = media === MediaType.mobile
 
-  const { dataset: currentDataset, mutateDatasetRes } = useDatasetDetailContext()
+  const currentDataset = useDatasetDetailContextWithSelector(state => state.dataset)
+  const mutateDatasetRes = useDatasetDetailContextWithSelector(state => state.mutateDatasetRes)
 
   const isInUpload = Boolean(currentDataset)
   const isUploadInEmptyDataset = isInUpload && !currentDataset?.doc_form

web/app/components/datasets/settings/form/index.tsx

@@ -1,7 +1,6 @@
 'use client'
 import { useCallback, useRef, useState } from 'react'
 import { useMount } from 'ahooks'
-import { useContext } from 'use-context-selector'
 import { useTranslation } from 'react-i18next'
 import { useSWRConfig } from 'swr'
 import { unstable_serialize } from 'swr/infinite'
@@ -18,7 +17,7 @@ import { ApiConnectionMod } from '@/app/components/base/icons/src/vender/solid/d
 import { updateDatasetSetting } from '@/service/datasets'
 import type { IconInfo } from '@/models/datasets'
 import { ChunkingMode, type DataSetListResponse, DatasetPermission } from '@/models/datasets'
-import DatasetDetailContext from '@/context/dataset-detail'
+import { useDatasetDetailContextWithSelector } from '@/context/dataset-detail'
 import type { AppIconType, RetrievalConfig } from '@/types/app'
 import { useSelector as useAppContextWithSelector } from '@/context/app-context'
 import { isReRankModelSelected } from '@/app/components/datasets/common/check-rerank-model'
@@ -60,7 +59,8 @@ const Form = () => {
   const { t } = useTranslation()
   const { mutate } = useSWRConfig()
   const isCurrentWorkspaceDatasetOperator = useAppContextWithSelector(state => state.isCurrentWorkspaceDatasetOperator)
-  const { dataset: currentDataset, mutateDatasetRes: mutateDatasets } = useContext(DatasetDetailContext)
+  const currentDataset = useDatasetDetailContextWithSelector(state => state.dataset)
+  const mutateDatasets = useDatasetDetailContextWithSelector(state => state.mutateDatasetRes)
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState(currentDataset?.name ?? '')
   const [iconInfo, setIconInfo] = useState(currentDataset?.icon_info || DEFAULT_APP_ICON)

web/service/knowledge/use-dataset.ts

@@ -1,5 +1,5 @@
-import { useInfiniteQuery } from '@tanstack/react-query'
-import type { DataSetListResponse, DatasetListRequest } from '@/models/datasets'
+import { useInfiniteQuery, useQuery } from '@tanstack/react-query'
+import type { DataSet, DataSetListResponse, DatasetListRequest, RelatedAppResponse } from '@/models/datasets'
 import { get } from '../base'
 import { useReset } from '../use-base'
 import qs from 'qs'
@@ -30,3 +30,17 @@ export const useDatasetList = (params: DatasetListRequest) => {
 export const useResetDatasetList = () => {
   return useReset([...DatasetListKey])
 }
+
+export const useDatasetDetail = (datasetId: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'detail', datasetId],
+    queryFn: () => get<DataSet>(`/datasets/${datasetId}`),
+  })
+}
+
+export const useDatasetRelatedApps = (datasetId: string) => {
+  return useQuery({
+    queryKey: [NAME_SPACE, 'related-apps', datasetId],
+    queryFn: () => get<RelatedAppResponse>(`/datasets/${datasetId}/related_apps`),
+  })
+}

web/service/use-pipeline.ts

@@ -66,7 +66,7 @@ export const useDeleteTemplate = (
 }
 
 export const useExportTemplateDSL = (
-  mutationOptions: MutationOptions<ExportTemplateDSLResponse, Error, ExportTemplateDSLRequest> = {},
+  mutationOptions: MutationOptions<ExportTemplateDSLResponse, Error, string> = {},
 ) => {
   return useMutation({
     mutationKey: [NAME_SPACE, 'dsl-export'],
@@ -83,7 +83,7 @@ export const useImportPipelineDSL = (
   return useMutation({
     mutationKey: [NAME_SPACE, 'dsl-import'],
     mutationFn: (request: ImportPipelineDSLRequest) => {
-      return post<ImportPipelineDSLResponse>('/rag/pipeline/imports', { body: request })
+      return post<ImportPipelineDSLResponse>('/rag/pipelines/imports', { body: request })
     },
     ...mutationOptions,
   })