fix typscript template issues

kit/internal/tpl/ts/stub.tstmpl

@@ -28,18 +28,21 @@
 
 {{/* Generate the DTO interfaces */}}
 // Code generated by RonyKIT Stub Generator (TypeScript); DO NOT EDIT.
+
+import useSWR, { SWRConfiguration } from 'swr'
+
 {{ range $dtoName, $dto := .DTOs -}}
 	{{ template "dto" $dto }}
 {{- end }}
 
 
 {{/* Generate the Stub Class */}}
 {{$serviceName := .Name}}
-class {{$serviceName}}Stub {
+export class {{$serviceName}}Stub {
 readonly serverURL: string ;
 
 constructor(serverURL: string) {
-	this.serverURL = serverURL.replace(/\/$/, '');
+this.serverURL = serverURL.replace(/\/$/, '');
 }
 
 {{/*
@@ -53,41 +56,62 @@ constructor(serverURL: string) {
 		{{- if eq (toLower .Method) "get" }}
 			const keys = Object.keys(req);
 			const keyValuePairs = keys.map(key => {
-			return encodeURIComponent(key) + '=' + encodeURIComponent(req[key]);
+			return encodeURIComponent(key) + '=' + encodeURIComponent((req as any)[key]);
 			}).join('&');
-			const queryParams =  (keyValuePairs.length > 0) ? `${keyValuePairs}`: ""
+			const queryParams =  (keyValuePairs.length > 0) ? `?${keyValuePairs}`: ""
 			const url = `${this.serverURL}{{tsReplacePathParams .Path "req."}}${queryParams}`;
 			return fetch(url, {
-				method: "{{.Method}}",
-				headers: {
-					"Content-Type": "application/json",
-					...headers,
-				}
+			method: "{{.Method}}",
+			headers: {
+			"Content-Type": "application/json",
+			...headers,
+			}
 			}).then((res: Response) => {
-				if (res.status !== 200) {
-					throw new Error("Failed to fetch the data");
-				}
+			if (res.status !== 200) {
+			throw new Error("Failed to fetch the data");
+			}
 
-				return res.json()
+			return res.json()
 			})
 		{{- else }}
 			return fetch(this.serverURL + `{{tsReplacePathParams .Path "req."}}`, {
-				method: "{{.Method}}",
-				headers: {
-					"Content-Type": "application/json",
-					...headers,
-				},
-				body: JSON.stringify(req)
+			method: "{{.Method}}",
+			headers: {
+			"Content-Type": "application/json",
+			...headers,
+			},
+			body: JSON.stringify(req)
 			}).then((res: Response) => {
-				if (res.status !== 200) {
-					throw new Error("Failed to fetch the data");
-				}
+			if (res.status !== 200) {
+			throw new Error("Failed to fetch the data");
+			}
 
-				return res.json()
+			return res.json()
 			})
 		{{- end }}
 		}
 	{{- end }}
 {{- end }}
 
 } // end of {{$serviceName}}Stub
+
+{{/* Generating React Hooks */}}
+{{- range .RESTs -}}
+{{$methodName := .Name}}
+{{- if ne $methodName "" }}
+	export function use{{$methodName}}(
+	stub: {{$serviceName}}Stub,
+	req: {{.Request.Name}},
+	options?: Partial
+	<SWRConfiguration<{{.Response.Name}}>>
+	) {
+	return useSWR(
+	[req, '{{$methodName}}'],
+	(req) => {
+	return stub.{{lowerCamelCase $methodName}}(req[0])
+	},
+	options
+	)
+	}
+{{- end}}
+{{- end}}