nuxt-openapi-hyperfetch 0.3.6-beta → 0.3.8-beta

package/dist/generators/components/connector-generator/templates.js

@@ -38,6 +38,11 @@ function buildImports(resource, composablesRelDir, sdkRelDir, runtimeRelDir) {
     // zod
     lines.push(`import { z } from 'zod';`);
     lines.push('');
+    // Vue — computed needed for the detail connector wrapper
+    if (resource.detailEndpoint) {
+        lines.push(`import { computed } from 'vue';`);
+        lines.push('');
+    }
     // connector-types — structural interfaces for return types
     const connectorTypeImports = ['ListConnectorReturn'];
     if (resource.detailEndpoint) {
@@ -238,7 +243,10 @@ function buildFunctionBody(resource) {
     }
     if (resource.detailEndpoint) {
         const fn = toAsyncDataName(resource.detailEndpoint.operationId);
-        subConnectors.push(`  const detail = useDetailConnector(${fn}) as unknown as DetailConnectorReturn<${pascal}>;`);
+        // Wrap the composable to map the generic idRef to the actual path param name.
+        // useDetailConnector passes a ref<id> and calls refresh() after updating it.
+        const pathParam = resource.detailEndpoint.pathParams[0] ?? 'id';
+        subConnectors.push(`  const detail = useDetailConnector(`, `    (idRef, opts) => ${fn}(computed(() => ({ ${pathParam}: idRef.value })) as any, opts),`, `  ) as unknown as DetailConnectorReturn<${pascal}>;`);
     }
     if (resource.createEndpoint) {
         const fn = toAsyncDataName(resource.createEndpoint.operationId);

package/dist/generators/shared/runtime/useDetailConnector.d.ts

@@ -10,5 +10,5 @@ export declare function useDetailConnector(composableFn: any, options?: {}): {
     load: (id: any) => Promise<void>;
     clear: () => void;
     _composable: any;
-    _currentId: any;
+    _idRef: any;
 };

package/dist/generators/shared/runtime/useDetailConnector.js

@@ -16,23 +16,32 @@ import { ref, computed } from 'vue';
  */
 export function useDetailConnector(composableFn, options = {}) {
     const { fields = [] } = options;
-    // The item ID to load — reactive. null = not loaded yet.
-    const currentId = ref(null);
-    // ── Execute the underlying composable lazily (only when currentId changes) ─
-    // We call the composable with lazy: true so it doesn't auto-fetch on mount.
-    // load(id) sets currentId which triggers the watch inside the composable.
-    const composable = composableFn(computed(() => (currentId.value !== null ? { id: currentId.value } : null)), { lazy: true, immediate: false });
+    // ── Reactive ID ref passed to the composable wrapper ──────────────────────
+    // The generated connector wraps the composable like:
+    //   (idRef, opts) => useAsyncDataGetPetById(computed(() => ({ petId: idRef.value })), opts)
+    // This lets us update idRef.value in load(id) so refresh() picks up the new value.
+    const idRef = ref(null);
+    // ── Execute the underlying composable ──────────────────────────────────────
+    // watch: false + immediate: false + lazy: true prevent any fetch until
+    // load(id) is called explicitly. The URL is only evaluated on refresh().
+    const composable = composableFn(idRef, {
+        watch: false,
+        immediate: false,
+        lazy: true,
+    });
     // ── Derived state ──────────────────────────────────────────────────────────
     const item = computed(() => composable.data?.value ?? null);
     const loading = computed(() => composable.pending?.value ?? false);
     const error = computed(() => composable.error?.value ?? null);
     // ── Actions ────────────────────────────────────────────────────────────────
     async function load(id) {
-        currentId.value = id;
+        idRef.value = id;
         await composable.refresh?.();
     }
     function clear() {
-        currentId.value = null;
+        idRef.value = null;
+        if (composable.data)
+            composable.data.value = null;
     }
     return {
         // State
@@ -43,8 +52,8 @@ export function useDetailConnector(composableFn, options = {}) {
         // Actions
         load,
         clear,
-        // Expose composable for advanced use (e.g. useFormConnector loadWith)
+        // Expose composable for advanced use
         _composable: composable,
-        _currentId: currentId,
+        _idRef: idRef,
     };
 }

package/dist/index.js

@@ -216,7 +216,7 @@ program
                     await generateConnectors({
                         inputSpec: inputPath,
                         outputDir: `${composablesOutputDir}/connectors`,
-                        composablesRelDir: '../use-async-data',
+                        composablesRelDir: '../use-async-data/composables',
                         runtimeRelDir: '../../runtime',
                     });
                     spinner.stop('✓ Generated headless UI connectors');

package/dist/module/index.js

@@ -73,7 +73,7 @@ export default defineNuxtModule({
                 await generateConnectors({
                     inputSpec: resolvedInput,
                     outputDir: connectorsOutputDir,
-                    composablesRelDir: '../use-async-data',
+                    composablesRelDir: '../use-async-data/composables',
                     runtimeRelDir: '../../runtime',
                 }, logger);
             }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "nuxt-openapi-hyperfetch",
-  "version": "0.3.6-beta",
+  "version": "0.3.8-beta",
   "description": "Nuxt useFetch, useAsyncData and Nuxt server OpenAPI generator",
   "type": "module",
   "author": "",

package/src/generators/components/connector-generator/templates.ts

@@ -48,6 +48,12 @@ function buildImports(resource: ResourceInfo, composablesRelDir: string, sdkRelD
   lines.push(`import { z } from 'zod';`);
   lines.push('');
 
+  // Vue — computed needed for the detail connector wrapper
+  if (resource.detailEndpoint) {
+    lines.push(`import { computed } from 'vue';`);
+    lines.push('');
+  }
+
   // connector-types — structural interfaces for return types
   const connectorTypeImports: string[] = ['ListConnectorReturn'];
   if (resource.detailEndpoint) {
@@ -283,7 +289,14 @@ function buildFunctionBody(resource: ResourceInfo): string {
 
   if (resource.detailEndpoint) {
     const fn = toAsyncDataName(resource.detailEndpoint.operationId);
-    subConnectors.push(`  const detail = useDetailConnector(${fn}) as unknown as DetailConnectorReturn<${pascal}>;`);
+    // Wrap the composable to map the generic idRef to the actual path param name.
+    // useDetailConnector passes a ref<id> and calls refresh() after updating it.
+    const pathParam = resource.detailEndpoint.pathParams[0] ?? 'id';
+    subConnectors.push(
+      `  const detail = useDetailConnector(`,
+      `    (idRef, opts) => ${fn}(computed(() => ({ ${pathParam}: idRef.value })) as any, opts),`,
+      `  ) as unknown as DetailConnectorReturn<${pascal}>;`
+    );
   }
 
   if (resource.createEndpoint) {

package/src/generators/shared/runtime/useDetailConnector.ts

@@ -18,16 +18,20 @@ import { ref, computed } from 'vue';
 export function useDetailConnector(composableFn, options = {}) {
   const { fields = [] } = options;
 
-  // The item ID to load — reactive. null = not loaded yet.
-  const currentId = ref(null);
+  // ── Reactive ID ref passed to the composable wrapper ──────────────────────
+  // The generated connector wraps the composable like:
+  //   (idRef, opts) => useAsyncDataGetPetById(computed(() => ({ petId: idRef.value })), opts)
+  // This lets us update idRef.value in load(id) so refresh() picks up the new value.
+  const idRef = ref(null);
 
-  // ── Execute the underlying composable lazily (only when currentId changes) ─
-  // We call the composable with lazy: true so it doesn't auto-fetch on mount.
-  // load(id) sets currentId which triggers the watch inside the composable.
-  const composable = composableFn(
-    computed(() => (currentId.value !== null ? { id: currentId.value } : null)),
-    { lazy: true, immediate: false }
-  );
+  // ── Execute the underlying composable ──────────────────────────────────────
+  // watch: false + immediate: false + lazy: true prevent any fetch until
+  // load(id) is called explicitly. The URL is only evaluated on refresh().
+  const composable = composableFn(idRef, {
+    watch: false,
+    immediate: false,
+    lazy: true,
+  });
 
   // ── Derived state ──────────────────────────────────────────────────────────
 
@@ -38,12 +42,13 @@ export function useDetailConnector(composableFn, options = {}) {
   // ── Actions ────────────────────────────────────────────────────────────────
 
   async function load(id) {
-    currentId.value = id;
+    idRef.value = id;
     await composable.refresh?.();
   }
 
   function clear() {
-    currentId.value = null;
+    idRef.value = null;
+    if (composable.data) composable.data.value = null;
   }
 
   return {
@@ -57,8 +62,8 @@ export function useDetailConnector(composableFn, options = {}) {
     load,
     clear,
 
-    // Expose composable for advanced use (e.g. useFormConnector loadWith)
+    // Expose composable for advanced use
     _composable: composable,
-    _currentId: currentId,
+    _idRef: idRef,
   };
 }

package/src/index.ts

@@ -276,7 +276,7 @@ program
             await generateConnectors({
               inputSpec: inputPath,
               outputDir: `${composablesOutputDir}/connectors`,
-              composablesRelDir: '../use-async-data',
+              composablesRelDir: '../use-async-data/composables',
               runtimeRelDir: '../../runtime',
             });
             spinner.stop('✓ Generated headless UI connectors');

package/src/module/index.ts

@@ -112,7 +112,7 @@ export default defineNuxtModule<ModuleOptions>({
           {
             inputSpec: resolvedInput,
             outputDir: connectorsOutputDir,
-            composablesRelDir: '../use-async-data',
+            composablesRelDir: '../use-async-data/composables',
             runtimeRelDir: '../../runtime',
           },
           logger