feat: Update composables template for new ts-client (#4742)

* feat: Update composables template for new ts-client

* chore: Update changelog

Author: clockworkgr

changelog.md

@@ -18,6 +18,7 @@
 ### Fixes
 
 - [#4691](https://github.com/ignite/cli/pull/4691), [#4706](https://github.com/ignite/cli/pull/4706), [#4725](https://github.com/ignite/cli/pull/4725), [#4737](https://github.com/ignite/cli/pull/4737) Fix ts-client query template and solely Go template for `ts-client` generation.
+- [#4742](https://github.com/ignite/cli/pull/4742) Updates Vue composables template for new ts-client and tanstack/vue-query v5
 
 ## [`v29.0.0`](https://github.com/ignite/cli/releases/tag/v29.0.0)
 

ignite/pkg/cosmosgen/templates/composable/index.ts.tpl

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import { useQuery, type UseQueryOptions, useInfiniteQuery, type UseInfiniteQueryOptions } from "@tanstack/{{- .FrontendType -}}-query";
+import { useQuery, type UseQueryOptions, useInfiniteQuery, type UseInfiniteQueryOptions, type InfiniteData  } from "@tanstack/{{- .FrontendType -}}-query";
 import { useClient } from '../useClient';
 
 export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
@@ -14,6 +14,8 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
       {{- if (gt $i 0) -}}
         {{- $n = inc $i -}}
       {{- end }}
+  type {{ $FullName }}{{ $n }}Method = typeof client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}};
+  type {{ $FullName }}{{ $n }}Data = Awaited<ReturnType<{{ $FullName }}{{ $n }}Method>>["data"];
   const {{ $FullName }}{{ $n }} = (
       {{- if $rule.Params -}}
       {{- range $j,$a :=$rule.Params -}}
@@ -22,15 +24,16 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
       {{- end -}}
       , {{ end -}}
       {{- if $rule.HasQuery -}}        
-        query: any, 
-      {{- end }} options: any, perPage: number) => {
+        query:  NonNullable<Parameters<{{ $FullName }}{{ $n }}Method>[{{- len $rule.Params -}}]>, 
+      {{- end }} options:  Partial<UseInfiniteQueryOptions<{{ $FullName }}{{ $n }}Data, unknown, InfiniteData<{{ $FullName }}{{ $n }}Data,number>, Array<string | unknown>, number>> , perPage: number) => {
     const key = { type: '{{ $FullName }}{{ $n }}', {{ range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{ $a -}}
           {{- end -}} {{- if $rule.HasQuery -}}
             {{- if $rule.Params -}}, {{ end -}}
             query
           {{- end }} };    
-    return useInfiniteQuery([key], ({pageParam = 1}: { pageParam?: number}) => {
+    return useInfiniteQuery<{{ $FullName }}{{ $n }}Data, unknown, InfiniteData<{{ $FullName }}{{ $n }}Data,number>, Array<string | unknown>, number>({ queryKey: [key], queryFn: async (context: {pageParam?: number}) => {
+      const { pageParam=1 } = context;
        {{- if or $rule.HasQuery $rule.Params}}
       const { {{- if $rule.Params -}}{{- range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{ $a -}}
@@ -39,7 +42,7 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
       query['pagination.limit']=perPage;
       query['pagination.offset']= (pageParam-1)*perPage;
       query['pagination.count_total']= true;
-      return  client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}}
+      const res = await client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}}
         {{- $n -}}({{- range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{- $a -}}
           {{- end -}}
@@ -51,8 +54,10 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
             {{- if or $rule.HasQuery $rule.Params}},{{ end -}}
               {...key}
             {{- end -}}
-            ).then( res => ({...res.data,pageParam}) );
-    }, {...options,
+            );
+        return res.data;
+    }, ...options,
+      initialPageParam: 1,
       getNextPageParam: (lastPage, allPages) => { if ((lastPage.pagination?.total ?? 0) >((lastPage.pageParam ?? 0) * perPage)) {return lastPage.pageParam+1 } else {return undefined}},
       getPreviousPageParam: (firstPage, allPages) => { if (firstPage.pageParam==1) { return undefined } else { return firstPage.pageParam-1}}
     }
@@ -65,6 +70,9 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
       {{- if (gt $i 0) -}}
         {{- $n = inc $i -}}
       {{- end }}
+
+  type {{ $FullName }}{{ $n }}Method = typeof client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}};
+  type {{ $FullName }}{{ $n }}Data = Awaited<ReturnType<{{ $FullName }}{{ $n }}Method>>["data"];
   const {{ $FullName }}{{ $n }} = (
       {{- if $rule.Params -}}
       {{- range $j,$a :=$rule.Params -}}
@@ -73,20 +81,20 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
       {{- end -}}
       , {{ end -}}
       {{- if $rule.HasQuery -}}        
-        query: any, 
-      {{- end }} options: any) => {
+        query: NonNullable<Parameters<{{ $FullName }}{{ $n }}Method>[{{- len $rule.Params -}}]>, 
+      {{- end }} options: Partial<UseQueryOptions<{{ $FullName }}{{ $n }}Data>>) => {
     const key = { type: '{{ $FullName }}{{ $n }}', {{ range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{ $a -}}
           {{- end -}} {{- if $rule.HasQuery -}}
             {{- if $rule.Params -}}, {{ end -}}
             query
           {{- end }} };    
-    return useQuery([key], () => {
+    return useQuery<{{ $FullName }}{{ $n }}Data>({ queryKey: [key], queryFn: async () => {
        {{- if or $rule.HasQuery $rule.Params}}
       const { {{- if $rule.Params -}}{{- range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{ $a -}}
           {{- end -}}{{- if $rule.HasQuery -}}, {{- end -}}{{- end -}}{{- if $rule.HasQuery -}}query{{- end }} } = key{{ end }}
-      return  client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}}
+      const res = await client.{{ camelCaseUpperSta $.Module.Pkg.Name }}.query.{{ camelCase $FullName -}}
         {{- $n -}}({{- range $j,$a :=$rule.Params -}}
             {{- if (gt $j 0) -}}, {{ end }} {{- $a -}}
           {{- end -}}
@@ -98,8 +106,9 @@ export default function use{{ camelCaseUpperSta $.Module.Pkg.Name }}() {
             {{- if or $rule.HasQuery $rule.Params}},{{ end -}}
               {...key}
             {{- end -}}
-            ).then( res => res.data );
-    }, options);
+            );
+        return res.data;
+    }, ...options});
   }
   {{ end -}}
   {{- end -}}