@jskit-ai/http-web 0.1.58 → 0.1.60

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jskit-ai/http-web",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "type": "module",
   "scripts": {
     "test": "node --test"
@@ -44,14 +44,14 @@
     "./client/support/contractGuards": "./src/client/support/contractGuards.js"
   },
   "dependencies": {
-    "@jskit-ai/resource-crud-core": "0.1.155",
+    "@jskit-ai/resource-crud-core": "0.1.157",
     "@mdi/js": "^7.4.47"
   },
   "peerDependencies": {
-    "@jskit-ai/http-runtime": "0.1.211",
-    "@jskit-ai/kernel": "0.1.213",
-    "@jskit-ai/realtime": "0.1.210",
-    "@jskit-ai/shell-web": "0.1.217",
+    "@jskit-ai/http-runtime": "0.1.213",
+    "@jskit-ai/kernel": "0.1.215",
+    "@jskit-ai/realtime": "0.1.212",
+    "@jskit-ai/shell-web": "0.1.219",
     "@tanstack/vue-query": "^5.90.5",
     "vue": "^3.5.13",
     "vue-router": "^5.0.4",

package/src/client/composables/runtime/useEndpointResource.js

@@ -91,7 +91,7 @@ function useEndpointResource({
 
   const query = useQuery({
     queryKey,
-    queryFn: () => {
+    queryFn: ({ signal }) => {
       const requestPath = normalizedPath.value;
       if (!requestPath) {
         throw new Error("Resource path is required.");
@@ -102,7 +102,8 @@ function useEndpointResource({
           method: readMethod,
           query: readQuery,
           transport
-        })
+        }),
+        signal
       });
     },
     enabled: queryEnabled,

package/src/client/composables/runtime/useListCore.js

@@ -79,20 +79,15 @@ function useListCore({
     queryKey,
     initialPageParam,
     enabled: queryEnabled,
-    queryFn: async ({ pageParam }) => {
+    queryFn: async ({ pageParam, signal }) => {
       const requestPath = normalizedPath.value;
       if (!requestPath) {
         throw new Error("List path is required.");
       }
 
-      return activeClient.request(
-        requestPath,
-        buildListRequestOptions({
-          requestOptions,
-          transport,
-          pageParam
-        })
-      );
+      const options = buildListRequestOptions({ requestOptions, transport, pageParam });
+      options.signal = options.signal ? AbortSignal.any([signal, options.signal]) : signal;
+      return activeClient.request(requestPath, options);
     },
     getNextPageParam,
     selectItems,

package/test/requestTransportOptions.test.js

@@ -14,7 +14,7 @@ import {
   configureHttpWebClient,
   resetHttpWebClientForTests
 } from "../src/client/lib/httpClient.js";
-import { buildListRequestOptions } from "../src/client/composables/runtime/useListCore.js";
+import { buildListRequestOptions, useListCore } from "../src/client/composables/runtime/useListCore.js";
 import {
   resolveOperationRealtimeOptions
 } from "../src/client/composables/useRealtimeQueryInvalidation.js";
@@ -293,6 +293,75 @@ test("endpoint resource reads attach request recovery metadata to query options"
   });
 });
 
+for (const kind of ["endpoint", "list", "list with caller signal"]) {
+  test(`repeated ${kind} refreshes abort superseded HTTP requests`, async (t) => {
+    const paginated = kind !== "endpoint";
+    const caller = kind === "list with caller signal" ? new AbortController() : null;
+    const queryClient = new QueryClient();
+    const queryKey = ["endpoint-cancellation"];
+    const requests = [];
+    const active = new Set();
+    let resource;
+    const payload = (revision) => paginated
+      ? { pages: [{ items: [revision] }], pageParams: [null] }
+      : { revision };
+    queryClient.setQueryData(queryKey, payload(0));
+    const app = createSSRApp({
+      setup() {
+        resource = (paginated ? useListCore : useEndpointResource)({
+          queryKey,
+          path: "/api/endpoint-cancellation",
+          requestOptions: caller ? { signal: caller.signal } : null,
+          queryOptions: { staleTime: Infinity, retry: false },
+          client: {
+            request(_path, { signal }) {
+              return new Promise((resolve, reject) => {
+                const request = { signal, resolve };
+                requests.push(request);
+                active.add(request);
+                signal?.addEventListener("abort", () => {
+                  active.delete(request);
+                  reject(new DOMException("Query cancelled", "AbortError"));
+                }, { once: true });
+              });
+            }
+          }
+        });
+        return () => h("div");
+      }
+    });
+    app.use(VueQueryPlugin, { queryClient });
+    t.after(() => {
+      queryClient.clear();
+      for (const request of requests) request.resolve({ revision: -1 });
+    });
+    await renderToString(app);
+
+    const refreshes = [];
+    for (let revision = 1; revision <= 10; revision += 1) {
+      // SSR has no mounted observer; include its cached query in invalidation.
+      refreshes.push(revision % 2 === 0
+        ? queryClient.invalidateQueries({ queryKey, refetchType: "all" })
+        : resource.reload());
+      await new Promise((resolve) => setImmediate(resolve));
+      assert.equal(requests.length, revision);
+      assert.equal(active.size, 1, "only the latest refresh should keep an HTTP request alive");
+    }
+    assert.equal(requests[0].signal.aborted, true);
+    assert.equal(requests.at(-1).signal.aborted, false);
+    requests.at(-1).resolve(paginated ? { items: [10] } : { revision: 10 });
+    await Promise.all(refreshes);
+    assert.deepEqual(queryClient.getQueryData(queryKey), payload(10));
+    if (caller) {
+      const pending = resource.reload();
+      caller.abort();
+      assert.equal(requests.at(-1).signal.aborted, true);
+      await pending;
+      assert.equal(resource.query.error.value.name, "AbortError");
+    }
+  });
+}
+
 test("endpoint resources use the configured http-web HTTP client by default", async () => {
   const queryClient = new QueryClient();
   const calls = [];

package/test/useListRouteInitialization.test.js

@@ -256,10 +256,14 @@ test("route-synchronized lists make one initial request with the hydrated route
   });
 
   assert.equal(runtime.calls.length, 1);
+  const { signal } = runtime.calls[0].options;
+  assert.ok(signal instanceof AbortSignal);
+  assert.equal(signal.aborted, false);
   assert.deepEqual(runtime.calls[0], {
     path: "/contacts",
     options: {
       method: "GET",
+      signal,
       query: {
         currentness: "archived",
         limit: 20