vue-api-kit 1.1.1 → 1.3.0

package/README.md

@@ -34,6 +34,23 @@ const api = createApiClient({
         name: z.string(),
         email: z.string()
       })
+    },
+    // POST query for complex searches
+    searchUsers: {
+      method: 'POST',
+      path: '/users/search',
+      data: z.object({
+        query: z.string(),
+        filters: z.object({
+          active: z.boolean().optional(),
+          role: z.string().optional()
+        }).optional()
+      }),
+      response: z.array(z.object({
+        id: z.number(),
+        name: z.string(),
+        email: z.string()
+      }))
     }
   },
   mutations: {
@@ -70,7 +87,11 @@ const api = createApiClient({
 
 ## 📖 Usage in Vue Components
 
-### Queries (GET requests)
+### Queries (GET and POST requests)
+
+Queries support both GET and POST methods, allowing you to fetch data with complex search criteria.
+
+#### GET Queries
 
 ```vue
 <script setup lang="ts">
@@ -111,6 +132,51 @@ const { result: data } = api.query.getUsers({
 </template>
 ```
 
+#### POST Queries
+
+POST queries are perfect for complex searches, filtering, or any operation that requires sending data in the request body.
+
+```vue
+<script setup lang="ts">
+import { api } from './api';
+import { ref } from 'vue';
+
+const searchTerm = ref('');
+
+const { result, isLoading, refetch } = api.query.searchUsers({
+  data: {
+    query: searchTerm.value,
+    filters: {
+      active: true,
+      role: 'admin'
+    }
+  },
+  loadOnMount: false,
+  onResult: (data) => {
+    console.log('Search results:', data);
+  }
+});
+
+const handleSearch = () => {
+  refetch();
+};
+</script>
+
+<template>
+  <div>
+    <input v-model="searchTerm" @keyup.enter="handleSearch" />
+    <button @click="handleSearch" :disabled="isLoading">Search</button>
+    
+    <div v-if="isLoading">Searching...</div>
+    <div v-else-if="result">
+      <div v-for="user in result" :key="user.id">
+        {{ user.name }}
+      </div>
+    </div>
+  </div>
+</template>
+```
+
 ### Mutations (POST, PUT, DELETE)
 
 ```vue
@@ -155,12 +221,16 @@ async function handleSubmit() {
 - ✅ **Type-Safe**: Full TypeScript support with automatic type inference
 - ✅ **Zod Validation**: Built-in request/response validation
 - ✅ **Vue 3 Composition API**: Reactive state management
+- ✅ **Lightweight**: ~7kB minified (2.2kB gzipped) - optimized for production
 - ✅ **Auto Loading States**: Built-in loading, error, and success states
-- ✅ **File Upload**: Support for multipart/form-data
+- ✅ **POST Queries**: Support for both GET and POST methods in queries for complex data retrieval
+- ✅ **File Upload**: Support for multipart/form-data in mutations
 - ✅ **Path Parameters**: Automatic path parameter replacement
 - ✅ **Debouncing**: Built-in request debouncing
 - ✅ **Global Error Handling**: Centralized error management
 - ✅ **Request Interceptors**: Modify requests before sending
+- ✅ **Fully Typed**: Complete type inference for params, data, and response
+- ✅ **Tree-Shakeable**: Only bundles what you use
 
 ## 🔧 Advanced Configuration
 
@@ -207,6 +277,8 @@ const api = createApiClient({
 
 ## 📤 File Upload Example
 
+File uploads are supported in mutations using the `isMultipart` flag.
+
 ```typescript
 const api = createApiClient({
   baseURL: 'https://api.example.com',
@@ -230,7 +302,7 @@ const { mutate, uploadProgress } = api.mutation.uploadImage({
 });
 
 async function handleUpload(file: File) {
-  await mutate({ file });
+  await mutate({ data: { file } });
 }
 ```
 

package/dist/core/client.d.ts

@@ -42,6 +42,6 @@ import { ApiClientOptions, ApiMutation, ApiQuery, Infer, MutationResult, QueryRe
  * const { mutate } = api.mutation.createUser();
  */
 export declare function createApiClient<Q extends Record<string, ApiQuery>, M extends Record<string, ApiMutation>>(options: ApiClientOptions<Q, M>): {
-    query: { [K in keyof Q]: (options?: UseQueryOptions<Infer<Q[K]["params"]>, Infer<Q[K]["response"]>>) => QueryResult<Infer<Q[K]["response"]>>; };
+    query: { [K in keyof Q]: (options?: UseQueryOptions<Infer<Q[K]["params"]>, Infer<Q[K]["data"]>, Infer<Q[K]["response"]>>) => QueryResult<Infer<Q[K]["response"]>>; };
     mutation: { [K_1 in keyof M]: (options?: UseMutationOptions<Infer<M[K_1]["response"]>>) => MutationResult<Infer<M[K_1]["response"]>, Infer<M[K_1]["data"]>, Infer<M[K_1]["params"]>>; };
 };

package/dist/core/types.d.ts

@@ -17,8 +17,9 @@ export type HTTPMethod = "GET" | "POST" | "PUT" | "PATCH" | "DELETE";
  */
 export type Infer<T> = T extends ZodType<infer U> ? U : any;
 /**
- * Defines a query (GET request) endpoint configuration
- * @template TParams - Zod schema for query parameters
+ * Defines a query endpoint configuration (supports GET and POST methods)
+ * @template TParams - Zod schema for query/path parameters
+ * @template TData - Zod schema for request body (POST only)
  * @template TResponse - Zod schema for response data
  * @example
  * const getUsers: ApiQuery = {
@@ -27,11 +28,19 @@ export type Infer<T> = T extends ZodType<infer U> ? U : any;
  *   params: z.object({ page: z.number() }),
  *   response: z.array(z.object({ id: z.number(), name: z.string() }))
  * };
+ * @example
+ * const searchUsers: ApiQuery = {
+ *   method: "POST",
+ *   path: "/users/search",
+ *   data: z.object({ query: z.string() }),
+ *   response: z.array(z.object({ id: z.number(), name: z.string() }))
+ * };
  */
-export interface ApiQuery<TParams extends ZodType<any> | undefined = ZodType<any> | undefined, TResponse extends ZodType<any> | undefined = ZodType<any> | undefined> {
-    method?: Extract<HTTPMethod, "GET">;
+export interface ApiQuery<TParams extends ZodType<any> | undefined = ZodType<any> | undefined, TData extends ZodType<any> | undefined = ZodType<any> | undefined, TResponse extends ZodType<any> | undefined = ZodType<any> | undefined> {
+    method?: Extract<HTTPMethod, "GET" | "POST">;
     path: string;
     params?: TParams;
+    data?: TData;
     response?: TResponse;
 }
 /**
@@ -88,6 +97,7 @@ export interface ApiClientOptions<Q extends Record<string, ApiQuery> = Record<st
 /**
  * Options for configuring a query hook
  * @template TParams - Type of query parameters
+ * @template TData - Type of request body data (for POST queries)
  * @template TResult - Type of result data
  * @example
  * const options: UseQueryOptions = {
@@ -97,14 +107,22 @@ export interface ApiClientOptions<Q extends Record<string, ApiQuery> = Record<st
  *   onResult: (data) => console.log(data),
  *   onError: (error) => console.error(error)
  * };
+ * @example
+ * const options: UseQueryOptions = {
+ *   data: { query: "search term" },
+ *   loadOnMount: true,
+ *   onResult: (data) => console.log(data)
+ * };
  */
-export interface UseQueryOptions<TParams = any, TResult = any> {
+export interface UseQueryOptions<TParams = any, TData = any, TResult = any> {
     params?: TParams;
+    data?: TData;
     loadOnMount?: boolean;
     debounce?: number;
     onResult?: (result: TResult) => void;
     onError?: (error: AxiosError | ZodError | Error) => void;
     onZodError?: (issues: Omit<$ZodIssue, "input">[]) => void;
+    onUploadProgress?: (progress: number) => void;
 }
 /**
  * Options for configuring a mutation hook
@@ -131,6 +149,7 @@ export interface UseMutationOptions<TResult = any> {
  * // isLoading.value indicates loading state
  * // errorMessage.value contains any error message
  * // refetch() to manually trigger a new request
+ * // uploadProgress.value shows upload progress (0-100) for POST queries with file uploads
  */
 export interface QueryResult<TResult> {
     result: Ref<TResult | undefined>;
@@ -138,6 +157,7 @@ export interface QueryResult<TResult> {
     zodErrors: Ref<Omit<$ZodIssue, "input">[] | undefined>;
     isLoading: Ref<boolean>;
     isDone: Ref<boolean>;
+    uploadProgress: Ref<number>;
     refetch: () => Promise<void>;
 }
 /**