@directus/composables 11.3.0 → 11.4.0

package/dist/index.js

@@ -1,8 +1,9 @@
 import { computed, defineComponent, inject, isRef, nextTick, onBeforeUnmount, onMounted, onUnmounted, provide, reactive, ref, shallowRef, toRef, toRefs, unref, watch } from "vue";
 import { API_INJECT, EXTENSIONS_INJECT, SDK_INJECT, STORES_INJECT } from "@directus/constants";
 import { nanoid } from "nanoid";
-import { capitalize, isEqual, isNil, throttle } from "lodash-es";
+import { capitalize, isEmpty, isEqual, isNil, throttle } from "lodash-es";
 import { getEndpoint, moveInArray } from "@directus/utils";
+import { useMemoize } from "@vueuse/core";
 import axios from "axios";
 
 //#region src/use-system.ts
@@ -884,12 +885,24 @@ function useItems(collection, query) {
 		if (itemCount.value < (unref(limit) ?? 100)) return 1;
 		return Math.ceil(itemCount.value / (unref(limit) ?? 100));
 	});
-	const existingRequests = {
-		items: null,
-		total: null,
-		filter: null
-	};
+	let itemsAbort = null;
+	let totalCountGeneration = 0;
+	let itemCountGeneration = 0;
 	let loadingTimeout = null;
+	const fetchAggregate = useMemoize(async (url, filter$1, search$1) => {
+		const aggregate = primaryKeyField.value ? { countDistinct: primaryKeyField.value.field } : { count: "*" };
+		const response = await api.get(url, { params: {
+			aggregate,
+			...filter$1 ? { filter: filter$1 } : {},
+			...search$1 ? { search: search$1 } : {}
+		} });
+		return primaryKeyField.value ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field]) : Number(response.data.data[0].count);
+	}, { getKey(url, filter$1, search$1) {
+		const key = { url };
+		if (!isEmpty(filter$1)) key.filter = filter$1;
+		if (!isEmpty(search$1)) key.search = search$1;
+		return JSON.stringify(key);
+	} });
 	const fetchItems = throttle((shouldUpdateCount) => {
 		Promise.all([getItems(), shouldUpdateCount ? getItemCount() : Promise.resolve()]);
 	}, 500);
@@ -940,8 +953,8 @@ function useItems(collection, query) {
 	async function getItems() {
 		if (!endpoint.value) return;
 		let isCurrentRequestCanceled = false;
-		if (existingRequests.items) existingRequests.items.abort();
-		existingRequests.items = new AbortController();
+		if (itemsAbort) itemsAbort.abort();
+		itemsAbort = new AbortController();
 		error.value = null;
 		if (loadingTimeout) clearTimeout(loadingTimeout);
 		loadingTimeout = setTimeout(() => {
@@ -962,9 +975,9 @@ function useItems(collection, query) {
 					filter: unref(filter),
 					deep: unref(deep)
 				},
-				signal: existingRequests.items.signal
+				signal: itemsAbort.signal
 			})).data.data;
-			existingRequests.items = null;
+			itemsAbort = null;
 			/**
 			* @NOTE
 			*
@@ -1011,19 +1024,10 @@ function useItems(collection, query) {
 	}
 	async function getTotalCount() {
 		if (!endpoint.value) return;
+		const currentGeneration = ++totalCountGeneration;
 		try {
-			if (existingRequests.total) existingRequests.total.abort();
-			existingRequests.total = new AbortController();
-			const aggregate = primaryKeyField.value ? { countDistinct: primaryKeyField.value.field } : { count: "*" };
-			const response = await api.get(endpoint.value, {
-				params: {
-					aggregate,
-					filter: unref(filterSystem)
-				},
-				signal: existingRequests.total.signal
-			});
-			const count = primaryKeyField.value ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field]) : Number(response.data.data[0].count);
-			existingRequests.total = null;
+			const count = await fetchAggregate(endpoint.value, filterSystem?.value, void 0);
+			if (currentGeneration !== totalCountGeneration) return;
 			totalCount.value = count;
 		} catch (err) {
 			if (!axios.isCancel(err)) throw err;
@@ -1031,26 +1035,16 @@ function useItems(collection, query) {
 	}
 	async function getItemCount() {
 		if (!endpoint.value) return;
+		const currentGeneration = ++itemCountGeneration;
 		loadingItemCount.value = true;
 		try {
-			if (existingRequests.filter) existingRequests.filter.abort();
-			existingRequests.filter = new AbortController();
-			const aggregate = primaryKeyField.value ? { countDistinct: primaryKeyField.value.field } : { count: "*" };
-			const response = await api.get(endpoint.value, {
-				params: {
-					filter: unref(filter),
-					search: unref(search),
-					aggregate
-				},
-				signal: existingRequests.filter.signal
-			});
-			const count = primaryKeyField.value ? Number(response.data.data[0].countDistinct[primaryKeyField.value.field]) : Number(response.data.data[0].count);
-			existingRequests.filter = null;
+			const count = await fetchAggregate(endpoint.value, filter.value, search.value);
+			if (currentGeneration !== itemCountGeneration) return;
 			itemCount.value = count;
 		} catch (err) {
 			if (!axios.isCancel(err)) throw err;
 		} finally {
-			loadingItemCount.value = false;
+			if (currentGeneration === itemCountGeneration) loadingItemCount.value = false;
 		}
 	}
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@directus/composables",
-  "version": "11.3.0",
+  "version": "11.4.0",
   "description": "Shared Vue composables for Directus use",
   "homepage": "https://directus.io",
   "repository": {
@@ -22,7 +22,8 @@
     "dist"
   ],
   "dependencies": {
-    "axios": "1.13.5",
+    "@vueuse/core": "14.0.0",
+    "axios": "1.15.0",
     "lodash-es": "4.18.1",
     "nanoid": "5.1.6",
     "@directus/utils": "13.4.0",
@@ -37,8 +38,8 @@
     "typescript": "5.9.3",
     "vitest": "3.2.4",
     "vue": "3.5.24",
-    "@directus/extensions": "3.0.23",
-    "@directus/types": "15.0.1",
+    "@directus/extensions": "3.0.24",
+    "@directus/types": "15.0.2",
     "@directus/sdk": "21.2.2"
   },
   "peerDependencies": {