feat: @tanstack/vue-query integration from devtools-next

[reslear]

🆒 Your use case

@tanstack/vue-query devtools

🆕 The solution you'd like

we already have integration by @webfansplz in devtools-next

qa: vuejs/devtools#317
pr: vuejs/devtools#381

maybe there is a possibility to use it as an applet as it was with component tree or pinia ?

🔍 Alternatives you've considered

No response

ℹ️ Additional info

No response

[sevensolutions]

I'am trying to implement this in my own project in the meantime, but can't get it working.
The problem is that every page in the nuxt devtools-console is hosted in an iframe.

So i thought i would register a global function on window in the main app (after creating the QueryClient), for creating the dev tools:

const queryClient = new QueryClient({
  ...
});

nuxtApp.vueApp.use(VueQueryPlugin, {
  queryClient: queryClient
});

(<any>window).__devToolsTanstackQueryDevtoolsPanel = () => {
    return new TanstackQueryDevtoolsPanel({
      client: queryClient,
      queryFlavor: 'Vue Query',
      version: '5',
      onlineManager,
      buttonPosition: "bottom-right",
      position: "bottom",
      initialIsOpen: true,
      errorTypes: undefined,
      styleNonce: undefined,
      shadowDOMTarget: undefined,
    });
  }

And then i created a new page for the iframe, which calls this function and mounts the devtools.

onMounted(() => {
  let rootWindow = window;

  while (!rootWindow.__devToolsTanstackQueryDevtoolsPanel && rootWindow.parent && rootWindow.parent != rootWindow) {
    rootWindow = rootWindow.parent;
  }

  if (rootWindow.__devToolsTanstackQueryDevtoolsPanel) {
    devtools = rootWindow.__devToolsTanstackQueryDevtoolsPanel();

    devtools.mount(div.value as HTMLElement);
  }
})

The console is mounted fine but doesn't show any queries.
Is passing the right QueryClient not enough?

[peterbud]

You might try the module I have published which has a full Nuxt Devtools support for Tanstack Query:
https://github.com/peterbud/nuxt-query