feat: simple create api save to DB

pages/app.vue

@@ -1,16 +1,58 @@
 <script lang="ts" setup>
-import { ApiMethod } from '@prisma/client';
+import { ApiMethod } from '@prisma/client'
+
+const { $client } = useNuxtApp()
 
 const method = ref<ApiMethod>('GET')
 const options = Object.values(ApiMethod)
-const url = ref('https://httpie.io/hello')
+const url = ref('https://echo.hoppscotch.io')
+const response = ref()
 
+const sending = ref(false)
 async function onSend() {
-  const response = await $fetch('/proxy', {
-    method: method.value as any,
-    url: url.value,
-  })
-  console.log(response)
+  sending.value = true
+  try {
+    const data = await $fetch('/proxy', {
+      method: 'POST',
+      body: JSON.stringify({
+        method: method.value,
+        url: url.value,
+        params: {},
+        headers: {},
+        auth: {},
+        body: {},
+      }),
+    })
+    response.value = data
+  }
+  finally {
+    sending.value = false
+  }
+}
+
+const saving = ref(false)
+async function onSave() {
+  saving.value = true
+  try {
+    $client.protected.apiCreate.mutate({
+      endpoint: url.value,
+      method: method.value,
+      params: {},
+      body: {},
+      headers: {},
+      authorization: {},
+      preRequestScript: '',
+      postResponseScript: '',
+      tags: [],
+      versions: [],
+      order: 1,
+      // TODO:
+      projectId: 'clnli74i20000vf2ny8o9r7sk',
+    })
+  }
+  finally {
+    saving.value = false
+  }
 }
 </script>
 
@@ -23,11 +65,13 @@ async function onSend() {
     <div class="w-3/4 p-1 border flex flex-col gap-2">
       <div class="w-full flex gap-1">
         <USelectMenu v-model="method" :options="options" />
-        <UInput v-model="url" class="w-80" placeholder="https://httpie.io/hello" />
-        <UButton @click="onSend">
+        <UInput v-model="url" class="w-80" placeholder="https://echo.hoppscotch.io" />
+        <UButton :loading="sending" @click="onSend">
           Send
         </UButton>
-        <UButton>Save</UButton>
+        <UButton :loading="saving" @click="onSave">
+          Save
+        </UButton>
       </div>
       <div class="w-full h-full flex gap-2">
         <div class="flex-1 border">
@@ -55,6 +99,8 @@ async function onSend() {
               Response
             </div>
           </div>
+
+          <pre>{{ response }}</pre>
         </div>
       </div>
     </div>

prisma/schema.prisma

@@ -71,8 +71,8 @@ model Api {
   body               Json
   headers            Json
   authorization      Json
-  preRequestScript   String
-  postResponseScript String
+  preRequestScript   String    @default("")
+  postResponseScript String    @default("")
   tags               Json
   versions           Json
   order              Int

server/routes/proxy.post.ts

@@ -0,0 +1,19 @@
+interface Payload {
+  method: string
+  url: string
+  params: Record<string, any>
+  headers: Record<string, any>
+  auth: Record<string, any>
+  body: Record<string, any>
+}
+
+// TODO: Use trcp?
+export default defineEventHandler(async (event) => {
+  const payload = await readBody<Payload>(event)
+  return $fetch(payload.url, {
+    method: payload.method as any,
+    headers: payload.headers,
+    params: payload.params,
+    // body?
+  })
+})

server/trpc/routers/protected.ts

@@ -1,5 +1,5 @@
 import { $Enums } from '@prisma/client'
-import { z } from 'zod'
+import { string, z } from 'zod'
 import { protectedProcedure, router } from '../trpc'
 
 export const protectedRouter = router({
@@ -132,8 +132,8 @@ export const protectedRouter = router({
   apiCreate: protectedProcedure
     .input(
       z.object({
-        name: z.string().min(3).max(50),
-        description: z.string().min(3).max(255),
+        name: z.string().min(3).max(50).optional(),
+        description: z.string().min(3).max(255).optional(),
         endpoint: z.string(),
         method: z.nativeEnum($Enums.ApiMethod),
         params: z.object({}),
@@ -142,10 +142,10 @@ export const protectedRouter = router({
         authorization: z.object({}),
         preRequestScript: z.string(),
         postResponseScript: z.string(),
-        tags: z.object({}),
-        versions: z.object({}),
+        tags: z.array(string()),
+        versions: z.array(string()),
         order: z.number(),
-        status: z.nativeEnum($Enums.ApiStatus),
+        status: z.nativeEnum($Enums.ApiStatus).optional(),
         projectId: z.string(),
       }),
     ).mutation(async (event) => {