Enable Tanstack Query Devtools (#2807)

* support tanstack query devtools

* tweak logging

* init devtools even on prod

Author: ChristopherChudzicki

frontends/api/src/ssr/usePrefetchWarnings.ts

@@ -4,6 +4,7 @@ import { userQueries } from "../hooks/user/queries"
 
 const logQueries = (...args: [...string[], Query[]]) => {
   const queries = args.pop() as Query[]
+  console.group("Prefetch Info")
   console.info(...args)
   console.table(
     queries.map((query) => ({
@@ -15,6 +16,7 @@ const logQueries = (...args: [...string[], Query[]]) => {
     })),
     ["hash", "status", "observerCount", "disabled"],
   )
+  console.groupEnd()
 }
 
 const PREFETCH_EXEMPT_QUERIES = [userQueries.me().queryKey]

frontends/main/src/app/getQueryClient.ts

@@ -141,11 +141,48 @@ function getQueryClient() {
     // have a suspense boundary BELOW the creation of the query client
     if (!browserQueryClient) {
       browserQueryClient = makeBrowserQueryClient()
+      initBrowserDevTools(browserQueryClient)
     }
+
     return browserQueryClient
   }
 }
 
+declare global {
+  interface Window {
+    __TANSTACK_QUERY_CLIENT__?: QueryClient
+  }
+}
+/**
+ * Initialize Tanstack Query browser dev tools.
+ *
+ * - This can be enabled in production, it only affects people with the extension installed.
+ * - See https://tanstack.com/query/v5/docs/framework/react/devtools
+ */
+function initBrowserDevTools(browserQueryClient: QueryClient) {
+  if (process.env.NODE_ENV === "development") {
+    // Log a tip about using Tanstack Query devtools
+    // But only once... We don't want to spam devs on every hot reload
+    if (!window.__TANSTACK_QUERY_CLIENT__) {
+      const parts = [
+        {
+          text: "API Query Debugging\n",
+          style: "color: blue; font-weight: bold;",
+        },
+        {
+          text: "Tip: You can use Tanstack Query devtools to inspect query data, even if the data was fetched server-side. See https://tanstack.com/query/v5/docs/framework/react/devtools",
+          style: "color: unset; font-weight: normal;",
+        },
+      ]
+      console.log(
+        parts.map(({ text }) => `%c${text}`).join(""),
+        ...parts.map(({ style }) => style),
+      )
+    }
+  }
+  window.__TANSTACK_QUERY_CLIENT__ = browserQueryClient
+}
+
 /**
  * Use a custom focus manager for react-query's refetchOnWindowFocus feature.
  *