[UI v2] feat: Adds tanstack query dev tools for development mode

PrefectHQ · Nov 27, 2024 · 3fc6253 · 3fc6253
1 parent 3da0f05
commit 3fc6253
Show file tree

Hide file tree

Showing 4 changed files with 45 additions and 7 deletions.
diff --git a/ui-v2/package-lock.json b/ui-v2/package-lock.json
diff --git a/ui-v2/package.json b/ui-v2/package.json
@@ -36,6 +36,7 @@
 		"@radix-ui/react-toast": "^1.2.2",
 		"@radix-ui/react-tooltip": "^1.1.3",
 		"@tanstack/react-query": "^5.56.2",
+		"@tanstack/react-query-devtools": "^5.61.5",
 		"@tanstack/react-table": "^8.20.5",
 		"@tanstack/router-zod-adapter": "^1.58.16",
 		"@uiw/react-codemirror": "^4.23.6",

diff --git a/ui-v2/src/app.tsx b/ui-v2/src/app.tsx
@@ -1,11 +1,13 @@
 import { RouterProvider } from "@tanstack/react-router";
 import { queryClient, router } from "./router";
 import { QueryClientProvider } from "@tanstack/react-query";
+import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
 
 export const App = () => {
 	return (
 		<QueryClientProvider client={queryClient}>
 			<RouterProvider router={router} />
+			<ReactQueryDevtools />
 		</QueryClientProvider>
 	);
 };
diff --git a/ui-v2/tests/setup.ts b/ui-v2/tests/setup.ts
@@ -42,3 +42,8 @@ Object.defineProperty(window, "matchMedia", {
 vi.mock("@tanstack/router-devtools", () => ({
 	TanStackRouterDevtools: () => null,
 }));
+
+// Mock @tanstack/react-query-devtools
+vi.mock("@tanstack/react-query-devtool", () => ({
+	ReactQueryDevtools: () => null,
+}));