perf: optimisation de requêtes page liste de données (#566)

* perf: premier test du champ "fields" sur les collections API entrepôt * perf: une façon différente de fournir le paramètre fields * chore: sauvegarde * perf: optimisation de requêtes page liste de données
IGNF · Dec 2, 2024 · b44a7cd · b44a7cd
1 parent 1b70160
commit b44a7cd
Show file tree

Hide file tree

Showing 9 changed files with 1,223 additions and 27 deletions.
diff --git a/assets/@types/app.ts b/assets/@types/app.ts
@@ -73,6 +73,14 @@ export enum DatasheetDocumentTypeEnum {
     Link = "link",
 }
 
+// type PartialVectorDb = Pick<VectorDb, "name" | "description" | "type" | "visibility" | "status" | "srs" | "contact" | "size" | "last_event" | "tags"> & {
+//     bbox?: BoundingBox;
+// };
+
+// type PartialPyramid = Pick<Pyramid, "name" | "description" | "type" | "visibility" | "status" | "srs" | "contact" | "size" | "last_event" | "tags"> & {
+//     bbox?: BoundingBox;
+// };
+
 export type DatasheetDetailed = Datasheet & {
     vector_db_list: VectorDb[] | undefined;
     pyramid_list: Pyramid[] | undefined;

diff --git a/assets/entrepot/pages/datasheet/DatasheetList/DatasheetList.tsx b/assets/entrepot/pages/datasheet/DatasheetList/DatasheetList.tsx
@@ -30,8 +30,8 @@ const DatasheetList: FC<DatasheetListProps> = ({ datastoreId }) => {
     const datasheetListQuery = useQuery({
         queryKey: RQKeys.datastore_datasheet_list(datastoreId),
         queryFn: ({ signal }) => api.datasheet.getList(datastoreId, { signal }),
-        staleTime: 30000,
-        refetchInterval: 30000,
+        staleTime: 60000,
+        refetchInterval: 60000,
         enabled: datastoreQuery.data !== undefined,
     });
 

diff --git a/assets/entrepot/pages/datasheet/DatasheetView/DatasheetView.tsx b/assets/entrepot/pages/datasheet/DatasheetView/DatasheetView.tsx
@@ -78,16 +78,16 @@ const DatasheetView: FC<DatasheetViewProps> = ({ datastoreId, datasheetName }) =
     const metadataQuery = useQuery<Metadata, CartesApiException>({
         queryKey: RQKeys.datastore_metadata_by_datasheet_name(datastoreId, datasheetName),
         queryFn: ({ signal }) => api.metadata.getByDatasheetName(datastoreId, datasheetName, { signal }),
-        enabled: !datasheetQuery.isFetching && !datasheetDeleteMutation.isPending,
+        enabled: !datasheetDeleteMutation.isPending,
         staleTime: 60000,
         retry: false,
     });
 
     const documentsListQuery = useQuery({
         queryKey: RQKeys.datastore_datasheet_documents_list(datastoreId, datasheetName),
         queryFn: ({ signal }) => api.datasheetDocument.getList(datastoreId, datasheetName, { signal }),
-        staleTime: 60000,
-        enabled: activeTab === DatasheetViewActiveTabEnum.Documents,
+        staleTime: 120000,
+        enabled: !datasheetDeleteMutation.isPending,
     });
 
     return (
@@ -171,7 +171,7 @@ const DatasheetView: FC<DatasheetViewProps> = ({ datastoreId, datasheetName }) =
                                         tabId: DatasheetViewActiveTabEnum.Dataset,
                                     },
                                     {
-                                        label: t("tab_label.services", { num: datasheetQuery.data?.service_list?.length || 0 }),
+                                        label: t("tab_label.services", { num: datasheetQuery.data.service_list?.length || 0 }),
                                         tabId: DatasheetViewActiveTabEnum.Services,
                                     },
                                     {
@@ -193,7 +193,13 @@ const DatasheetView: FC<DatasheetViewProps> = ({ datastoreId, datasheetName }) =
                                             return <DatasetListTab datastoreId={datastoreId} datasheet={datasheetQuery.data} />;
 
                                         case DatasheetViewActiveTabEnum.Services:
-                                            return <ServicesListTab datastoreId={datastoreId} datasheet={datasheetQuery.data} />;
+                                            return (
+                                                <ServicesListTab
+                                                    datastoreId={datastoreId}
+                                                    datasheet={datasheetQuery.data}
+                                                    datasheet_services_list={datasheetQuery.data.service_list ?? []}
+                                                />
+                                            );
 
                                         case DatasheetViewActiveTabEnum.Documents:
                                             return <DocumentsTab datastoreId={datastoreId} datasheetName={datasheetName} />;
@@ -240,8 +246,8 @@ const DatasheetView: FC<DatasheetViewProps> = ({ datastoreId, datasheetName }) =
                             {datasheetQuery?.data?.pyramid_list?.length && datasheetQuery?.data?.pyramid_list.length > 0 ? (
                                 <li>{datasheetQuery?.data?.pyramid_list.length} pyramide(s) de tuiles vectorielles</li>
                             ) : null}
-                            {datasheetQuery?.data?.service_list?.length && datasheetQuery?.data?.service_list.length > 0 ? (
-                                <li>{datasheetQuery?.data?.service_list.length} service(s) publié(s)</li>
+                            {datasheetQuery.data?.service_list?.length && datasheetQuery.data.service_list.length > 0 ? (
+                                <li>{datasheetQuery.data?.service_list.length} service(s) publié(s)</li>
                             ) : null}
                             {datasheetQuery?.data?.upload_list?.length && datasheetQuery?.data?.upload_list.length > 0 ? (
                                 <li>{datasheetQuery?.data?.upload_list.length} livraison(s)</li>

diff --git a/assets/entrepot/pages/datasheet/DatasheetView/ServiceListTab/ServicesListTab.tsx b/assets/entrepot/pages/datasheet/DatasheetView/ServiceListTab/ServicesListTab.tsx
@@ -3,23 +3,24 @@ import { FC } from "react";
 import { symToStr } from "tsafe/symToStr";
 
 import Translator from "../../../../../modules/Translator";
-import { DatasheetDetailed } from "../../../../../@types/app";
+import { DatasheetDetailed, Service } from "../../../../../@types/app";
 import ServicesListItem from "./ServicesListItem";
 
 type ServicesListTabProps = {
     datasheet: DatasheetDetailed;
     datastoreId: string;
+    datasheet_services_list: Service[];
 };
-const ServicesListTab: FC<ServicesListTabProps> = ({ datastoreId, datasheet }) => {
-    if (!datasheet?.service_list || datasheet?.service_list.length === 0) {
+const ServicesListTab: FC<ServicesListTabProps> = ({ datastoreId, datasheet, datasheet_services_list }) => {
+    if (!datasheet_services_list || datasheet_services_list.length === 0) {
         return (
             <div className={fr.cx("fr-grid-row", "fr-grid-row--middle")}>
                 <p>{Translator.trans("datasheet.view.services.no_service")}</p>
             </div>
         );
     }
 
-    return datasheet?.service_list?.map((service) => (
+    return datasheet_services_list?.map((service) => (
         <ServicesListItem key={service._id} service={service} datasheetName={datasheet.name} datastoreId={datastoreId} />
     ));
 };