Add bulk remove all queries functionality

Implement ability to remove all queries at once with new RemoveAllQueriesButton component. Add BULK_QUERY_ACTION and CLEAR_ARTIFICIAL_STATES message types to handle bulk operations and clean up artificial states when queries are cleared.

Author: dborysov

memory-bank

@@ -22,6 +22,14 @@ function App() {
     sendMessage,
   } = useConnection();
   const { handleQueryAction } = useUIState(sendMessage);
+
+  // Handler for removing all queries
+  const handleRemoveAllQueries = () => {
+    sendMessage({
+      type: "BULK_QUERY_ACTION",
+      action: "REMOVE_ALL_QUERIES",
+    });
+  };
   const {
     currentView,
     searchTerm,
@@ -82,6 +90,7 @@ function App() {
                   selectedMutationIndex={selectedMutationIndex}
                   onSelectQuery={setSelectedQueryIndex}
                   onSelectMutation={setSelectedMutationIndex}
+                  onRemoveAllQueries={handleRemoveAllQueries}
                   queryKeyboardNavigation={queryKeyboardNavigation}
                   mutationKeyboardNavigation={mutationKeyboardNavigation}
                 />

src/App.tsx

@@ -7,6 +7,8 @@ import type {
   UpdateMessage,
   QueryActionResult,
   RequestImmediateUpdateMessage,
+  BulkQueryActionMessage,
+  ClearArtificialStatesMessage,
 } from "../types/messages";
 
 // Zod schema for serialized payload validation
@@ -24,6 +26,8 @@ type BackgroundMessage =
   | UpdateMessage
   | QueryActionResult
   | (RequestImmediateUpdateMessage & { inspectedTabId?: number })
+  | (BulkQueryActionMessage & { inspectedTabId?: number })
+  | ClearArtificialStatesMessage
   | {
       type: "QUERY_ACTION";
       inspectedTabId?: number;
@@ -42,6 +46,7 @@ chrome.runtime.onMessage.addListener(
       // Forward DevTools actions to content script of the specified tab
       if (
         message.type === "QUERY_ACTION" ||
+        message.type === "BULK_QUERY_ACTION" ||
         message.type === "REQUEST_IMMEDIATE_UPDATE"
       ) {
         // Track preservation flag for REQUEST_IMMEDIATE_UPDATE messages
@@ -181,6 +186,30 @@ chrome.runtime.onMessage.addListener(
         return true;
       }
 
+      // Handle clear artificial states message from content script
+      if (message.type === "CLEAR_ARTIFICIAL_STATES") {
+        StorageManager.getState()
+          .then((currentState) => {
+            const artificialStates = {
+              ...(currentState.artificialStates || {}),
+            };
+            // Clear artificial states for this tab only
+            delete artificialStates[tabId];
+            return StorageManager.updatePartialState({
+              artificialStates,
+              lastUpdated: Date.now(),
+            });
+          })
+          .then(() => {
+            sendResponse({ received: true });
+          })
+          .catch((error) => {
+            console.error("Failed to clear artificial states:", error);
+            sendResponse({ received: false, error: error.message });
+          });
+        return true;
+      }
+
       // Handle action results from content scripts and forward to DevTools
       if (message.type === "QUERY_ACTION_RESULT") {
         // Update artificial states in storage for TRIGGER_LOADING and TRIGGER_ERROR

src/background/background.ts

@@ -0,0 +1,24 @@
+import { Trash2 } from "lucide-react";
+import { buttonVariants } from "../../lib/variants";
+
+interface RemoveAllQueriesButtonProps {
+  disabled: boolean;
+  onRemoveAll: () => void;
+}
+
+export function RemoveAllQueriesButton({
+  disabled,
+  onRemoveAll,
+}: RemoveAllQueriesButtonProps) {
+  return (
+    <button
+      onClick={onRemoveAll}
+      disabled={disabled}
+      title="Remove all queries"
+      className={buttonVariants({ variant: "pink", size: "sm" })}
+      aria-label="Remove all queries"
+    >
+      <Trash2 size={14} className="shrink-0" />
+    </button>
+  );
+}

src/components/common/RemoveAllQueriesButton.tsx

@@ -1,6 +1,7 @@
 import { useEffect } from "react";
 import { QueryListItem } from "../query/QueryListItem";
 import { MutationListItem } from "../mutation/MutationListItem";
+import { RemoveAllQueriesButton } from "../common/RemoveAllQueriesButton";
 import type { QueryData, MutationData, ViewType } from "../../types/query";
 import type { useKeyboardNavigation } from "../../hooks/useKeyboardNavigation";
 
@@ -13,6 +14,7 @@ interface ListViewProps {
   selectedMutationIndex: number | null;
   onSelectQuery: (index: number | null) => void;
   onSelectMutation: (index: number | null) => void;
+  onRemoveAllQueries?: () => void;
   // Keyboard navigation props
   queryKeyboardNavigation?: ReturnType<typeof useKeyboardNavigation>;
   mutationKeyboardNavigation?: ReturnType<typeof useKeyboardNavigation>;
@@ -27,6 +29,7 @@ export function ListView({
   selectedMutationIndex,
   onSelectQuery,
   onSelectMutation,
+  onRemoveAllQueries,
   queryKeyboardNavigation,
   mutationKeyboardNavigation,
 }: ListViewProps) {
@@ -90,9 +93,17 @@ export function ListView({
       tabIndex={0}
     >
       <div className="p-4 border-b border-gray-200 dark:border-gray-600 bg-gray-50 dark:bg-gray-700 flex-shrink-0">
-        <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
-          {currentView === "queries" ? "Query List" : "Mutation List"}
-        </h4>
+        <div className="flex items-center justify-between">
+          <h4 className="text-sm font-medium text-gray-900 dark:text-gray-100">
+            {currentView === "queries" ? "Query List" : "Mutation List"}
+          </h4>
+          {currentView === "queries" && onRemoveAllQueries && (
+            <RemoveAllQueriesButton
+              disabled={queries.length === 0}
+              onRemoveAll={onRemoveAllQueries}
+            />
+          )}
+        </div>
       </div>
 
       <div className="flex-1 overflow-y-auto min-h-0 p-1">

src/components/layout/ListView.tsx

@@ -1,6 +1,5 @@
 import type { QueryData } from "../../types/query";
 import type { QueryAction } from "../../types/messages";
-import { formatQueryKeyShort } from "../../utils/formatters";
 import { buttonVariants } from "../../lib/variants";
 
 interface QueryActionsProps {
@@ -67,15 +66,7 @@ export function QueryActions({
         </button>
 
         <button
-          onClick={() => {
-            if (
-              confirm(
-                `Are you sure you want to remove this query from cache?\n\nQuery: ${formatQueryKeyShort(selectedQuery.queryKey)}`,
-              )
-            ) {
-              handleAction("REMOVE");
-            }
-          }}
+          onClick={() => handleAction("REMOVE")}
           disabled={shouldDisableButtons}
           className={buttonVariants({ variant: "pink" })}
         >

src/components/query/QueryActions.tsx

@@ -72,6 +72,16 @@ window.addEventListener("message", (event) => {
   if (event.data.type === "QUERY_ACTION_RESULT") {
     sendToBackground(event.data);
   }
+
+  // Forward clear artificial states message to background script
+  if (event.data.type === "CLEAR_ARTIFICIAL_STATES") {
+    chrome.runtime.sendMessage(event.data).catch((error) => {
+      console.warn(
+        "TanStack Query DevTools: Failed to send CLEAR_ARTIFICIAL_STATES to background:",
+        error,
+      );
+    });
+  }
 });
 
 // Inject the injected script into the page context
@@ -95,7 +105,7 @@ if (document.readyState === "loading") {
 // Listen for messages from DevTools and background script
 chrome.runtime.onMessage.addListener((message, _sender, sendResponse) => {
   // Handle query actions from DevTools
-  if (message.type === "QUERY_ACTION") {
+  if (message.type === "QUERY_ACTION" || message.type === "BULK_QUERY_ACTION") {
     sendActionToInjected(message);
     sendResponse({ received: true });
     return true;

src/content/content.ts

@@ -5,6 +5,8 @@ import type {
   TanStackQueryEvent,
   QueryActionMessage,
   QueryActionResult,
+  BulkQueryActionMessage,
+  BulkQueryActionResult,
 } from "../types/messages";
 import type { QueryData, MutationData } from "../types/query";
 
@@ -421,8 +423,67 @@ async function handleQueryAction(
   }
 }
 
+// Bulk query action handlers
+async function handleBulkQueryAction(
+  action: BulkQueryActionMessage,
+): Promise<BulkQueryActionResult> {
+  const queryClient = getQueryClient();
+
+  if (!queryClient) {
+    return {
+      type: "BULK_QUERY_ACTION_RESULT",
+      action: action.action,
+      success: false,
+      error: "QueryClient not found",
+    };
+  }
+
+  try {
+    switch (action.action) {
+      case "REMOVE_ALL_QUERIES": {
+        // Get all queries from the cache
+        const queryCache = queryClient.getQueryCache();
+        const allQueries = queryCache.getAll();
+        const queryCount = allQueries.length;
+
+        // Remove all queries
+        queryClient.removeQueries();
+
+        // Also clear artificial states for this tab
+        window.postMessage(
+          {
+            source: "tanstack-query-devtools-injected",
+            type: "CLEAR_ARTIFICIAL_STATES",
+          },
+          "*",
+        );
+
+        return {
+          type: "BULK_QUERY_ACTION_RESULT",
+          action: action.action,
+          success: true,
+          affectedCount: queryCount,
+        };
+      }
+
+      default:
+        throw new Error(`Unknown bulk action: ${action.action}`);
+    }
+  } catch (error) {
+    const errorMessage = error instanceof Error ? error.message : String(error);
+    console.error("TanStack Query DevTools: Bulk action failed:", error);
+
+    return {
+      type: "BULK_QUERY_ACTION_RESULT",
+      action: action.action,
+      success: false,
+      error: errorMessage,
+    };
+  }
+}
+
 // Send action result to content script
-function sendActionResult(result: QueryActionResult) {
+function sendActionResult(result: QueryActionResult | BulkQueryActionResult) {
   window.postMessage(
     {
       source: "tanstack-query-devtools-injected",
@@ -446,6 +507,14 @@ window.addEventListener("message", async (event) => {
     setTimeout(sendQueryDataUpdate, 100);
   }
 
+  if (event.data.type === "BULK_QUERY_ACTION") {
+    const result = await handleBulkQueryAction(event.data);
+    sendActionResult(result);
+
+    // Trigger query data update after bulk action
+    setTimeout(sendQueryDataUpdate, 100);
+  }
+
   // Handle immediate update requests from DevTools
   if (event.data.type === "REQUEST_IMMEDIATE_UPDATE") {
     if (performEnhancedDetection()) {

src/injected/injected.ts

@@ -24,6 +24,14 @@ function PopupApp() {
     sendMessage,
   } = usePopupConnection();
   const { handleQueryAction } = useUIState(sendMessage);
+
+  // Handle remove all queries action
+  const handleRemoveAllQueries = () => {
+    sendMessage({
+      type: "BULK_QUERY_ACTION",
+      action: "REMOVE_ALL_QUERIES",
+    });
+  };
   const {
     currentView,
     searchTerm,
@@ -94,6 +102,7 @@ function PopupApp() {
                   onSelectMutation={setSelectedMutationIndex}
                   queryKeyboardNavigation={queryKeyboardNavigation}
                   mutationKeyboardNavigation={mutationKeyboardNavigation}
+                  onRemoveAllQueries={handleRemoveAllQueries}
                 />
               </div>
             ) : (
@@ -116,7 +125,11 @@ function PopupApp() {
                         ? queries[selectedQueryIndex]
                         : null
                     }
-                    onAction={handleQueryAction}
+                    onAction={(action, queryHash, newState) => {
+                      if (action === "REMOVE") setSelectedQueryIndex(null);
+
+                      handleQueryAction(action, queryHash, newState);
+                    }}
                     artificialStates={artificialStates}
                   />
                 ) : (

src/popup/PopupApp.tsx

@@ -14,6 +14,9 @@ export type QueryAction = { queryHash: string } & (
   | { type: "SET_QUERY_DATA"; newData: unknown }
 );
 
+// Bulk Query Action Types - For operations affecting all queries
+export type BulkQueryAction = { type: "REMOVE_ALL_QUERIES" };
+
 // Base interface for action results
 interface BaseQueryActionResult {
   type: "QUERY_ACTION_RESULT";
@@ -36,6 +39,15 @@ export type QueryActionResult = BaseQueryActionResult &
     | { action: "SET_QUERY_DATA"; newData?: unknown }
   );
 
+// Bulk action result type
+export interface BulkQueryActionResult {
+  type: "BULK_QUERY_ACTION_RESULT";
+  action: BulkQueryAction["type"];
+  success: boolean;
+  error?: string;
+  affectedCount?: number;
+}
+
 // TanStack Query Event Types - Discriminated unions
 export type TanStackQueryEvent = { type: "QEVENT" } & (
   | { subtype: "QUERY_CLIENT_DETECTED" }
@@ -63,8 +75,19 @@ export interface QueryActionMessage {
   newData?: unknown;
 }
 
+// Bulk Query Action Message Type
+export interface BulkQueryActionMessage {
+  type: "BULK_QUERY_ACTION";
+  action: BulkQueryAction["type"];
+}
+
 // Request Immediate Update Message Type
 export interface RequestImmediateUpdateMessage {
   type: "REQUEST_IMMEDIATE_UPDATE";
   preserveArtificialStates?: boolean;
 }
+
+// Clear Artificial States Message Type
+export interface ClearArtificialStatesMessage {
+  type: "CLEAR_ARTIFICIAL_STATES";
+}