feat(devtools): register the devtools plugin and allow query inspection

package.json

@@ -21,7 +21,8 @@
     "dev:prepare": "nuxt-module-build --stub && nuxi prepare playground"
   },
   "dependencies": {
-    "@nuxt/kit": "^3.0.0"
+    "@nuxt/kit": "^3.0.0",
+    "@vue/devtools-api": "^6.4.5"
   },
   "devDependencies": {
     "@nuxt/module-builder": "^0.2.1",

playground/app.vue

@@ -1,8 +1,25 @@
 <template>
   <div>
     Nuxt module playground!
+
+    <button @click="fooRefresh()">
+      refresh foo
+    </button>
+    <button @click="barRefresh()">
+      refresh bar
+    </button>
   </div>
 </template>
 
-<script setup>
+<script setup lang="ts">
+import { useFetch } from '#app'
+
+const { data: fooData, refresh: fooRefresh } = await useFetch('/api/foo', {
+  key: 'foo'
+})
+
+const { data: barData, refresh: barRefresh } = await useFetch('/api/bar', {
+  key: 'bar',
+  immediate: false
+})
 </script>

playground/nuxt.config.ts

@@ -1,11 +1,8 @@
-import { defineNuxtConfig } from 'nuxt/config'
-import MyModule from '..'
+import NuxtQuery from '..'
 
 export default defineNuxtConfig({
-  modules: [
-    MyModule
-  ],
-  myModule: {
-    addPlugin: true
+  modules: [NuxtQuery],
+  nuxtQuery: {
+    addDevtools: true
   }
 })

playground/server/api/bar.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(() => {
+  return {
+    bar: Math.random()
+  }
+})

playground/server/api/foo.ts

@@ -0,0 +1,5 @@
+export default defineEventHandler(() => {
+  return {
+    foo: Math.random()
+  }
+})

src/module.ts

@@ -1,24 +1,30 @@
 import { fileURLToPath } from 'url'
-import { defineNuxtModule, addPlugin, createResolver } from '@nuxt/kit'
+import { defineNuxtModule, addPlugin, createResolver, useLogger } from '@nuxt/kit'
 
 export interface ModuleOptions {
-  addPlugin: boolean
+  addDevtools: boolean
 }
 
+const PACKAGE_NAME = 'nuxt-query'
+
 export default defineNuxtModule<ModuleOptions>({
   meta: {
-    name: 'nuxt-query',
+    name: PACKAGE_NAME,
     configKey: 'nuxtQuery'
   },
   defaults: {
-    addPlugin: true
+    addDevtools: true
   },
   setup (options, nuxt) {
-    if (options.addPlugin) {
+    const logger = useLogger(PACKAGE_NAME)
+
+    if (options.addDevtools) {
       const { resolve } = createResolver(import.meta.url)
       const runtimeDir = fileURLToPath(new URL('./runtime', import.meta.url))
       nuxt.options.build.transpile.push(runtimeDir)
-      addPlugin(resolve(runtimeDir, 'plugin'))
+
+      addPlugin(resolve(runtimeDir, 'plugins', 'devtools'))
+      logger.info('Installed nuxt-query devtools.')
     }
   }
 })

src/runtime/composables/useQueryCache.ts

@@ -0,0 +1,5 @@
+import { useNuxtApp } from '#imports'
+
+export const useQueryCache = () => {
+  return useNuxtApp().payload.data
+}

src/runtime/devtools/devtools.ts

@@ -0,0 +1,65 @@
+import { setupDevtoolsPlugin } from '@vue/devtools-api'
+import { watch } from '#imports'
+
+const inspectorId = 'nuxt-query-cache'
+
+export const setupDevtools = (app: any, data: Record<string, any>) => {
+  setupDevtoolsPlugin({
+    id: 'nuxt-query',
+    label: 'Nuxt Query',
+    packageName: 'nuxt-query',
+    app
+  }, (api) => {
+    api.addInspector({
+      id: inspectorId,
+      label: 'Nuxt Query Cache',
+      icon: 'cached'
+    })
+
+    api.on.getInspectorTree((payload, context) => {
+      if (payload.inspectorId === inspectorId) {
+        const children: {
+          id: string
+          label: string
+        }[] = []
+
+        Object.entries(data).forEach((value) => {
+          children.push({
+            id: value[0],
+            label: value[0]
+          })
+        })
+
+        payload.rootNodes = [
+          {
+            id: 'root',
+            label: 'Query Cache',
+            children
+          }
+        ]
+      }
+    })
+
+    api.on.getInspectorState((payload) => {
+      if (payload.inspectorId === inspectorId) {
+        Object.entries(data).forEach((value) => {
+          if (payload.nodeId === value[0]) {
+            payload.state = {
+              Value: value[1]
+            }
+          }
+        })
+      }
+    })
+
+    watch(data, () => {
+      // Update tree
+      api.sendInspectorTree(inspectorId)
+
+      // Update state
+      api.sendInspectorState(inspectorId)
+    }, {
+      deep: true
+    })
+  })
+}

src/runtime/devtools/installer.ts

@@ -0,0 +1,14 @@
+import { useQueryCache } from '../composables/useQueryCache'
+import { setupDevtools } from './devtools'
+
+export const pluginInstaller = {
+  install (app: any) {
+    const data = useQueryCache()
+
+    let devtools: ReturnType<typeof setupDevtools>
+
+    if (process.env.NODE_ENV !== 'production') {
+      devtools = setupDevtools(app, data)
+    }
+  }
+}

src/runtime/plugins/devtools.ts

@@ -0,0 +1,8 @@
+import { defineNuxtPlugin } from '#app'
+import { pluginInstaller } from '../devtools/installer'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  if (process.client) {
+    nuxtApp.vueApp.use(pluginInstaller)
+  }
+})