feat(example): add nitro auto imports and examples in playground

README.md

@@ -17,6 +17,8 @@
 - 🛟  Auto-imported typed database query client provided by [`@edgedb/generate`](https://www.edgedb.com/docs/clients/js/generation)
 - 🍩  [`edgedb ui`](https://www.edgedb.com/docs/cli/edgedb_ui) injected into [Nuxt Devtools](https://github.com/nuxt/devtools)
 
+⚠️ This is still very experimental project. Please do not use until it is properly announced.
+
 ## Quick Setup
 
 1. Add `nuxt-edgedb` dependency to your project

playground/app.vue

@@ -2,11 +2,18 @@
   <div>
     Nuxt EdgeDB playground!
 
-    Add a new client:
-    <input placeholder="thecompaniesapi.com">
-    <button @click="submit">
-      {{ loading ? 'Loading...' : 'Submit' }}
-    </button>
+    <div>
+      Blogposts:
+      {{ data }}
+    </div>
+
+    <div>
+      Add a new client:
+      <input placeholder="thecompaniesapi.com">
+      <button @click="submit">
+        {{ loading ? 'Loading...' : 'Submit' }}
+      </button>
+    </div>
 
     <div v-if="error">
       {{ error }}
@@ -18,15 +25,22 @@
 const loading = ref(false);
 const error = ref("");
 const clientInput = ref();
+
+const { data, refresh } = await useAsyncData(
+  'blogpost-index',
+  () => $fetch('/api/blogpost')
+)
+
 const submit = async () => {
   loading.value = true
   error.value = ""
   try {
     await $fetch('/api/client/create', {
-    query: {
-      domain: clientInput.value
-    }
-  })
+      query: {
+        domain: clientInput.value
+      }
+    })
+    await refresh()
   } catch (e: any) {
     console.log(e);
     error.value = e;

playground/server/api/client/create.ts → playground/server/api/blogpost/[id].ts

@@ -2,11 +2,19 @@ import { defineEventHandler, getQuery, getRouterParams, H3Error } from 'h3'
 
 export default defineEventHandler(async (req) => {
   const params = getRouterParams(req)
-  const query = getQuery(req)
-  // const db = useEdgeDb()
+  const client = useEdgeDb()
 
-  if (query.domain) {
-    //
+  if (params.id) {
+    const blogpost = await client.querySingle(`
+      select BlogPost {
+        title,
+        description
+      } filter .id = ${params.id}
+    `)
+
+    console.log(blogpost)
+
+    return blogpost
   } else {
     const err = new H3Error('No domain found in query.')
     err.statusCode = 400

playground/server/api/blogpost/index.ts

@@ -0,0 +1,16 @@
+import { defineEventHandler, getQuery, getRouterParams, H3Error } from 'h3'
+
+export default defineEventHandler(async (req) => {
+  const client = useEdgeDb()
+
+  const blogposts = await client.query(`
+    select BlogPost {
+      title,
+      description
+    }
+  `)
+
+  console.log(blogposts)
+
+  return blogposts
+})

src/module.ts

@@ -19,8 +19,11 @@ export interface ModuleOptions {
   generateQueries: boolean
   generateQueryBuilder: boolean
   generateQuiet: boolean
+  composables: boolean
 }
 
+const { resolve: resolveLocal } = createResolver(import.meta.url)
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
     name: 'nuxt-edgedb',
@@ -38,7 +41,8 @@ export default defineNuxtModule<ModuleOptions>({
     generateInterfaces: true,
     generateQueries: true,
     generateQueryBuilder: true,
-    generateQuiet: true
+    generateQuiet: true,
+    composables: true
   },
   async setup(options, nuxt) {
     const logger = createConsola({
@@ -253,5 +257,19 @@ export default defineNuxtModule<ModuleOptions>({
         await generateQueryBuilder()
       })
     }
+
+    if (options.composables) {
+      // Add server-side auto-imports
+      nuxt.hook(
+        'nitro:config',
+        (config) => {
+          if (!config.imports)
+            config.imports = {}
+          if (!config.imports.dirs)
+            config.imports.dirs = []
+          config.imports.dirs.push(resolveLocal('./runtime/server'))
+        },
+      )
+    }
   }
 })

src/runtime/server/useEdgeDbQueries.ts

@@ -7,7 +7,7 @@ export function useEdgeDbQueries() {
     Object.entries(queries).map(([key, fn]) => {
       return [
         key,
-        (...args) => fn(client, ...args)
+        (args: Parameters<typeof fn>[1]) => fn(client, args)
       ]
     })
   )