fix(admin): frequent query requests in the search (#7854)

packages/frontend/admin/src/modules/accounts/components/data-table-toolbar.tsx

@@ -4,7 +4,13 @@ import { useQuery } from '@affine/core/hooks/use-query';
 import { getUserByEmailQuery } from '@affine/graphql';
 import { PlusIcon } from 'lucide-react';
 import type { SetStateAction } from 'react';
-import { startTransition, useCallback, useEffect, useState } from 'react';
+import {
+  startTransition,
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+} from 'react';
 
 import { useRightPanel } from '../../layout';
 import { DiscardChanges } from './discard-changes';
@@ -15,6 +21,21 @@ interface DataTableToolbarProps<TData> {
   setDataTable: (data: TData[]) => void;
 }
 
+const useSearch = () => {
+  const [value, setValue] = useState('');
+  const { data } = useQuery({
+    query: getUserByEmailQuery,
+    variables: { email: value },
+  });
+
+  const result = useMemo(() => data?.userByEmail, [data]);
+
+  return {
+    result,
+    query: setValue,
+  };
+};
+
 function useDebouncedValue<T>(value: T, delay: number): T {
   const [debouncedValue, setDebouncedValue] = useState(value);
 
@@ -37,9 +58,10 @@ export function DataTableToolbar<TData>({
 }: DataTableToolbarProps<TData>) {
   const [value, setValue] = useState('');
   const [dialogOpen, setDialogOpen] = useState(false);
-  const debouncedValue = useDebouncedValue(value, 500);
+  const debouncedValue = useDebouncedValue(value, 1000);
   const { setRightPanelContent, openPanel, closePanel, isOpen } =
     useRightPanel();
+  const { result, query } = useSearch();
 
   const handleConfirm = useCallback(() => {
     setRightPanelContent(<CreateUserForm onComplete={closePanel} />);
@@ -51,12 +73,9 @@ export function DataTableToolbar<TData>({
     }
   }, [setRightPanelContent, closePanel, dialogOpen, isOpen, openPanel]);
 
-  const result = useQuery({
-    query: getUserByEmailQuery,
-    variables: {
-      email: value,
-    },
-  }).data.userByEmail;
+  useEffect(() => {
+    query(debouncedValue);
+  }, [debouncedValue, query]);
 
   useEffect(() => {
     startTransition(() => {
@@ -68,13 +87,11 @@ export function DataTableToolbar<TData>({
         setDataTable([]);
       }
     });
-  }, [data, debouncedValue, result, setDataTable, value]);
+  }, [data, debouncedValue, result, setDataTable]);
 
   const onValueChange = useCallback(
     (e: { currentTarget: { value: SetStateAction<string> } }) => {
-      startTransition(() => {
-        setValue(e.currentTarget.value);
-      });
+      setValue(e.currentTarget.value);
     },
     []
   );