diff --git a/Changelog.md b/Changelog.md
index ec680207e..e8bceebfe 100644
--- a/Changelog.md
+++ b/Changelog.md
@@ -5,7 +5,8 @@
 ### Other changes
 
 - **Added** query editor for Gremlin connections
-  ([#878](https://github.com/aws/graph-explorer/pull/878))
+  ([#878](https://github.com/aws/graph-explorer/pull/878),
+  [#855](https://github.com/aws/graph-explorer/pull/855))
 - **Added** ability to customize default neighbor expansion limit
   ([#925](https://github.com/aws/graph-explorer/pull/925))
 - **Added** ability to resize the sidebar
diff --git a/packages/graph-explorer/src/connector/queries.ts b/packages/graph-explorer/src/connector/queries.ts
index b7cd969b3..a84576b84 100644
--- a/packages/graph-explorer/src/connector/queries.ts
+++ b/packages/graph-explorer/src/connector/queries.ts
@@ -5,8 +5,6 @@ import {
   Explorer,
   KeywordSearchRequest,
   KeywordSearchResponse,
-  RawQueryRequest,
-  RawQueryResponse,
   SchemaResponse,
   toMappedQueryResults,
   VertexDetailsRequest,
@@ -146,27 +144,6 @@ export function edgeDetailsQuery(
   });
 }
 
-export function rawQueryQuery(
-  request: RawQueryRequest,
-  updateSchema: (entities: { vertices: Vertex[]; edges: Edge[] }) => void,
-  explorer: Explorer,
-  queryClient: QueryClient
-) {
-  return queryOptions({
-    queryKey: ["db", "raw-query", request, explorer, queryClient],
-    queryFn: async ({ signal }): Promise<RawQueryResponse> => {
-      const results = await explorer.rawQuery(request, { signal });
-
-      // Update the schema and the cache
-      updateVertexDetailsCache(explorer, queryClient, results.vertices);
-      updateEdgeDetailsCache(explorer, queryClient, results.edges);
-      updateSchema(results);
-
-      return results;
-    },
-  });
-}
-
 /** Sets the vertex details cache for the given vertices. */
 export function updateVertexDetailsCache(
   explorer: Explorer,
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx b/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
index 6d769fce1..a8dace0ce 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
+++ b/packages/graph-explorer/src/modules/SearchSidebar/FilterSearchTabContent.tsx
@@ -11,9 +11,16 @@ import {
   Label,
   Checkbox,
   Input,
+  LoadingSpinner,
+  PanelEmptyState,
+  PanelError,
+  SearchSadIcon,
 } from "@/components";
 
 import { useTranslations } from "@/hooks";
+import { KeywordSearchResponse } from "@/connector";
+import { UseQueryResult } from "@tanstack/react-query";
+import { useCancelKeywordSearch } from "./useKeywordSearchQuery";
 
 export function FilterSearchTabContent() {
   const t = useTranslations();
@@ -108,7 +115,52 @@ export function FilterSearchTabContent() {
         </div>
       </div>
 
-      <SearchResultsList query={query} />
+      <SearchResultsListContainer query={query} />
     </div>
   );
 }
+
+function SearchResultsListContainer({
+  query,
+}: {
+  query: UseQueryResult<KeywordSearchResponse | null, Error>;
+}) {
+  const cancelAll = useCancelKeywordSearch();
+
+  if (query.isLoading) {
+    return (
+      <PanelEmptyState
+        title="Searching..."
+        subtitle="Looking for matching results"
+        actionLabel="Cancel"
+        onAction={() => cancelAll()}
+        icon={<LoadingSpinner />}
+        className="p-8"
+      />
+    );
+  }
+
+  if (query.isError && !query.data) {
+    return (
+      <PanelError error={query.error} onRetry={query.refetch} className="p-8" />
+    );
+  }
+
+  if (
+    !query.data ||
+    (query.data.vertices.length === 0 &&
+      query.data.edges.length === 0 &&
+      query.data.scalars.length === 0)
+  ) {
+    return (
+      <PanelEmptyState
+        title="No Results"
+        subtitle="Your criteria does not match with any record"
+        icon={<SearchSadIcon />}
+        className="p-8"
+      />
+    );
+  }
+
+  return <SearchResultsList {...query.data} />;
+}
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/QuerySearchTabContent.tsx b/packages/graph-explorer/src/modules/SearchSidebar/QuerySearchTabContent.tsx
index 7a9302498..dd849c80b 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/QuerySearchTabContent.tsx
+++ b/packages/graph-explorer/src/modules/SearchSidebar/QuerySearchTabContent.tsx
@@ -4,21 +4,24 @@ import {
   FormControl,
   FormField,
   FormItem,
-  Label,
+  LoadingSpinner,
+  PanelEmptyState,
+  PanelError,
+  SearchSadIcon,
   TextArea,
 } from "@/components";
-import { rawQueryQuery } from "@/connector";
 import { useExplorer, useUpdateSchemaFromEntities } from "@/core";
-import { useQuery, useQueryClient } from "@tanstack/react-query";
+import { useMutation, useQueryClient } from "@tanstack/react-query";
 import { CornerDownRightIcon } from "lucide-react";
-import { SearchResultsList } from "./SearchResultsList";
-import { useCallback, useDeferredValue } from "react";
 import { z } from "zod";
 import { useForm } from "react-hook-form";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { logger } from "@/utils";
 import { useAtom } from "jotai";
+import { SearchResultsList } from "./SearchResultsList";
 import { atomWithReset } from "jotai/utils";
+import { updateEdgeDetailsCache, updateVertexDetailsCache } from "@/connector";
+import { useRef } from "react";
 
 const formDataSchema = z.object({
   query: z.string().default(""),
@@ -26,64 +29,65 @@ const formDataSchema = z.object({
 
 type FormData = z.infer<typeof formDataSchema>;
 
+/**
+ * Stores the current query text.
+ *
+ * This is used to restore the query text when the user switches tabs in the
+ * sidebar, which forces React to create this view from scratch.
+ */
 export const queryTextAtom = atomWithReset("");
 
 export function QuerySearchTabContent() {
   const [queryText, setQueryText] = useAtom(queryTextAtom);
-  const form = useForm<FormData>({
+  const { mutation, cancel } = useRawQueryMutation();
+
+  const form = useForm({
     resolver: zodResolver(formDataSchema),
     defaultValues: {
       query: queryText,
     },
   });
 
-  const query = useQuerySearch(queryText);
+  // Execute the query when the form is submitted
+  const onSubmit = (data: FormData) => {
+    logger.debug("Executing query:", data);
+    setQueryText(data.query);
+    mutation.mutate(data.query);
+  };
 
-  const executeQuery = useCallback(
-    (data: FormData) => {
-      logger.debug("Executing query", data);
-      if (data.query !== queryText) {
-        setQueryText(data.query);
-      } else {
-        query.refetch();
-      }
-    },
-    [query, queryText, setQueryText]
-  );
+  // Submit the form when the user presses cmd+enter or ctrl+enter
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+      e.preventDefault();
+      form.handleSubmit(onSubmit)();
+    }
+  };
 
   return (
     <div className="bg-background-default flex h-full flex-col">
       <Form {...form}>
         <form
-          className="border-divider flex shrink-0 flex-col gap-3 border-b p-3"
-          onSubmit={form.handleSubmit(executeQuery)}
+          className="border-divider shrink-0 space-y-3 border-b p-3"
+          onSubmit={form.handleSubmit(onSubmit)}
         >
           <FormField
             control={form.control}
             name="query"
             render={({ field }) => (
-              <FormItem>
-                <Label htmlFor="query" className="sr-only">
-                  Query
-                </Label>
+              <FormItem className="space-y-0 p-[1px]">
                 <FormControl>
                   <TextArea
                     {...field}
                     aria-label="Query"
-                    className="h-full min-h-[5lh] w-full font-mono text-lg"
+                    className="h-full min-h-[5lh] w-full font-mono text-sm"
                     placeholder="e.g. g.V().limit(10)"
-                    onKeyDown={e => {
-                      if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                        e.preventDefault();
-                        form.handleSubmit(executeQuery)();
-                      }
-                    }}
+                    onKeyDown={onKeyDown}
                   />
                 </FormControl>
               </FormItem>
             )}
           />
-          <div className="flex gap-6">
+          <div className="flex gap-3">
             <Button className="w-full" variant="filled" type="submit">
               <CornerDownRightIcon />
               Run query
@@ -92,24 +96,112 @@ export function QuerySearchTabContent() {
         </form>
       </Form>
 
-      <SearchResultsList query={query} />
+      <SearchResultsListContainer
+        mutation={mutation}
+        cancel={cancel}
+        retry={() => mutation.mutate(queryText)}
+      />
     </div>
   );
 }
 
-function useQuerySearch(query: string) {
+function SearchResultsListContainer({
+  mutation,
+  cancel,
+  retry,
+}: {
+  mutation: RawQueryMutationResult;
+  cancel: () => void;
+  retry: () => void;
+}) {
+  if (mutation.isPending) {
+    return (
+      <PanelEmptyState
+        title="Executing query..."
+        icon={<LoadingSpinner />}
+        className="p-8"
+        actionLabel="Cancel"
+        onAction={() => cancel()}
+      />
+    );
+  }
+
+  if (
+    mutation.isError &&
+    !mutation.data &&
+    mutation.error.name !== "AbortError"
+  ) {
+    return (
+      <PanelError error={mutation.error} onRetry={retry} className="p-8" />
+    );
+  }
+
+  if (
+    !mutation.data ||
+    (mutation.data.vertices.length === 0 &&
+      mutation.data.edges.length === 0 &&
+      mutation.data.scalars.length === 0)
+  ) {
+    return (
+      <PanelEmptyState
+        title="No Results"
+        subtitle="Your query does not produce any results"
+        icon={<SearchSadIcon />}
+        className="p-8"
+      />
+    );
+  }
+
+  return <SearchResultsList {...mutation.data} />;
+}
+
+/**
+ * Execute raw queries against the database using a mutation.
+ *
+ * This is implemented as a mutation to prevent accidental duplicate query
+ * execution due to React re-renders or cache miss. This is important because
+ * mutations can be executed and if they are executed more than once, could lead
+ * to undesirable outcomes.
+ */
+function useRawQueryMutation() {
   const explorer = useExplorer();
   const queryClient = useQueryClient();
   const updateSchema = useUpdateSchemaFromEntities();
-  const delayedQuery = useDeferredValue(query);
-
-  return useQuery({
-    ...rawQueryQuery(
-      { query: delayedQuery },
-      updateSchema,
-      explorer,
-      queryClient
-    ),
-    staleTime: 0,
+
+  const abortControllerRef = useRef<AbortController | null>(null);
+
+  /** Cancels the active request */
+  const cancel = () => {
+    logger.debug("Cancelling query");
+    abortControllerRef.current?.abort();
+  };
+
+  const mutation = useMutation({
+    mutationFn: async (query: string) => {
+      // Create the abort controller and assign to the ref so the request can be cancelled
+      const abortController = new AbortController();
+      abortControllerRef.current = abortController;
+
+      const results = await explorer.rawQuery(
+        { query },
+        { signal: abortController.signal }
+      );
+
+      // Update the schema and the cache
+      updateVertexDetailsCache(explorer, queryClient, results.vertices);
+      updateEdgeDetailsCache(explorer, queryClient, results.edges);
+      updateSchema(results);
+
+      return results;
+    },
   });
+
+  return {
+    mutation,
+    cancel,
+  };
 }
+
+type RawQueryMutationResult = ReturnType<
+  typeof useRawQueryMutation
+>["mutation"];
diff --git a/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx b/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
index 9e92990b0..497526968 100644
--- a/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
+++ b/packages/graph-explorer/src/modules/SearchSidebar/SearchResultsList.tsx
@@ -1,120 +1,82 @@
-import {
-  Button,
-  ButtonProps,
-  PanelEmptyState,
-  LoadingSpinner,
-  PanelError,
-  SearchSadIcon,
-  PanelFooter,
-  Spinner,
-} from "@/components";
-import { KeywordSearchResponse, MappedQueryResults } from "@/connector";
-import { UseQueryResult } from "@tanstack/react-query";
-import { useCancelKeywordSearch } from "./useKeywordSearchQuery";
+import { Button, ButtonProps, PanelFooter, Spinner } from "@/components";
+import { MappedQueryResults } from "@/connector";
 import { NodeSearchResult } from "./NodeSearchResult";
 import { useAddToGraphMutation } from "@/hooks/useAddToGraph";
-import { PlusCircleIcon } from "lucide-react";
 import { EdgeSearchResult } from "./EdgeSearchResult";
 import { ScalarSearchResult } from "./ScalarSearchResult";
 import { Edge, Vertex } from "@/core";
+import { cn } from "@/utils";
 
-export function SearchResultsList({
-  query,
-}: {
-  query: UseQueryResult<KeywordSearchResponse | null, Error>;
-}) {
-  const cancelAll = useCancelKeywordSearch();
-
-  if (query.isLoading) {
-    return (
-      <PanelEmptyState
-        title="Searching..."
-        subtitle="Looking for matching results"
-        actionLabel="Cancel"
-        onAction={() => cancelAll()}
-        icon={<LoadingSpinner />}
-        className="p-8"
-      />
-    );
-  }
-
-  if (query.isError && !query.data) {
-    return (
-      <PanelError error={query.error} onRetry={query.refetch} className="p-8" />
-    );
-  }
-
-  if (
-    !query.data ||
-    (query.data.vertices.length === 0 &&
-      query.data.edges.length === 0 &&
-      query.data.scalars.length === 0)
-  ) {
-    return (
-      <PanelEmptyState
-        title="No Results"
-        subtitle="Your criteria does not match with any record"
-        icon={<SearchSadIcon />}
-        className="p-8"
-      />
-    );
-  }
-
-  return <LoadedResults {...query.data} />;
-}
-
-function LoadedResults({ vertices, edges, scalars }: MappedQueryResults) {
-  const counts = [
-    vertices.length ? `${vertices.length} nodes` : null,
-    edges.length ? `${edges.length} edges` : null,
-    scalars.length ? `${scalars.length} values` : null,
-  ]
-    .filter(Boolean)
-    .join(" • ");
+export function SearchResultsList(results: MappedQueryResults) {
+  // Combine all result types into a single list
+  const allRows = createRows(results);
 
   return (
     <>
       <div className="bg-background-contrast/35 flex grow flex-col p-3">
         <ul className="border-divider flex flex-col overflow-hidden rounded-xl border shadow">
-          {vertices.map(entity => (
-            <li
-              key={`node:${entity.type}:${entity.id}`}
-              className="border-divider content-auto intrinsic-size-16 border-b last:border-0"
-            >
-              <NodeSearchResult node={entity} />
-            </li>
-          ))}
-          {edges.map(entity => (
-            <li
-              key={`edge:${entity.type}:${entity.id}`}
-              className="border-divider content-auto intrinsic-size-16 border-b last:border-0"
-            >
-              <EdgeSearchResult edge={entity} />
-            </li>
-          ))}
-          {scalars.map((entity, index) => (
+          {allRows.map(row => (
             <li
-              key={`scalar:${String(entity)}:${index}`}
+              key={row.key}
               className="border-divider content-auto intrinsic-size-16 border-b last:border-0"
             >
-              <ScalarSearchResult scalar={entity} />
+              {row.render()}
             </li>
           ))}
         </ul>
       </div>
 
-      <PanelFooter className="sticky bottom-0 flex flex-row items-center justify-between">
-        <AddAllToGraphButton vertices={vertices} edges={edges} />
+      <PanelFooter className="sticky bottom-0 flex flex-row items-center justify-between gap-2">
+        <AddAllToGraphButton
+          vertices={results.vertices}
+          edges={results.edges}
+        />
         <div className="flex items-center gap-2">
-          <div className="text-text-secondary text-sm">
-            {counts || "No results"}
-          </div>
+          <ResultCounts results={results} />
         </div>
       </PanelFooter>
     </>
   );
 }
 
+function ResultCounts({ results }: { results: MappedQueryResults }) {
+  /** Create a string of counts for the number of results of each type */
+  const counts = [
+    results.vertices.length ? `${results.vertices.length} nodes` : null,
+    results.edges.length ? `${results.edges.length} edges` : null,
+    results.scalars.length ? `${results.scalars.length} values` : null,
+  ]
+    .filter(Boolean)
+    .join(" • ");
+
+  return (
+    <p className="text-text-secondary text-pretty text-sm">
+      {counts || "No results"}
+    </p>
+  );
+}
+
+/** Create a list of functions that render a row for each result type */
+function createRows({ vertices, edges, scalars }: MappedQueryResults) {
+  return vertices
+    .map(entity => ({
+      key: `node:${entity.type}:${entity.id}`,
+      render: () => <NodeSearchResult node={entity} />,
+    }))
+    .concat(
+      edges.map(entity => ({
+        key: `edge:${entity.type}:${entity.id}`,
+        render: () => <EdgeSearchResult edge={entity} />,
+      }))
+    )
+    .concat(
+      scalars.map((entity, index) => ({
+        key: `scalar:${String(entity)}:${index}`,
+        render: () => <ScalarSearchResult scalar={entity} />,
+      }))
+    );
+}
+
 function AddAllToGraphButton({
   vertices,
   edges,
@@ -122,15 +84,27 @@ function AddAllToGraphButton({
 }: ButtonProps & { vertices: Vertex[]; edges: Edge[] }) {
   const mutation = useAddToGraphMutation();
   const canSendToGraph = vertices.length > 0 || edges.length > 0;
+  const counts = vertices.length + edges.length;
+
+  if (counts === 0) {
+    return null;
+  }
 
   return (
     <Button
       onClick={() => mutation.mutate({ vertices, edges })}
       disabled={!canSendToGraph || mutation.isPending}
+      className="stack shrink-0 items-center justify-center"
       {...props}
     >
-      {mutation.isPending ? <Spinner /> : <PlusCircleIcon />}
-      Add all
+      <span className={cn("visible", mutation.isPending && "invisible")}>
+        Add All ({counts})
+      </span>
+      <span
+        className={cn("invisible", mutation.isPending && "visible mx-auto")}
+      >
+        <Spinner />
+      </span>
     </Button>
   );
 }