diff --git a/frontends/api/src/ssr/usePrefetchWarnings.ts b/frontends/api/src/ssr/usePrefetchWarnings.ts index ad7eb50f7e..42ad51f26d 100644 --- a/frontends/api/src/ssr/usePrefetchWarnings.ts +++ b/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] diff --git a/frontends/main/src/app/getQueryClient.ts b/frontends/main/src/app/getQueryClient.ts index 1849cfd3a1..25c70588d9 100644 --- a/frontends/main/src/app/getQueryClient.ts +++ b/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. *