Fix GRPC with files not refreshing, and tight render loop

src-web/components/App.tsx

@@ -1,6 +1,7 @@
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { MotionConfig } from 'framer-motion';
-import { Suspense } from 'react';
+import React, { Suspense } from 'react';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
 import { HelmetProvider } from 'react-helmet-async';
@@ -19,12 +20,12 @@ const queryClient = new QueryClient({
 export function App() {
   return (
     <QueryClientProvider client={queryClient}>
+      <ReactQueryDevtools initialIsOpen={false} />
       <MotionConfig transition={{ duration: 0.1 }}>
         <HelmetProvider>
           <DndProvider backend={HTML5Backend}>
             <Suspense>
               <AppRouter />
-              {/*<ReactQueryDevtools initialIsOpen={false} />*/}
             </Suspense>
           </DndProvider>
         </HelmetProvider>

src-web/components/CommandPalette.tsx

@@ -1,4 +1,3 @@
-import { invoke } from '@tauri-apps/api/core';
 import classNames from 'classnames';
 import { search } from 'fast-fuzzy';
 import type { KeyboardEvent, ReactNode } from 'react';
@@ -25,6 +24,7 @@ import { useRequests } from '../hooks/useRequests';
 import { useSidebarHidden } from '../hooks/useSidebarHidden';
 import { useWorkspaces } from '../hooks/useWorkspaces';
 import { fallbackRequestName } from '../lib/fallbackRequestName';
+import { invokeCmd } from '../lib/tauri';
 import { CookieDialog } from './CookieDialog';
 import { Button } from './core/Button';
 import { Heading } from './core/Heading';
@@ -82,7 +82,7 @@ export function CommandPalette({ onClose }: { onClose: () => void }) {
         action: 'settings.show',
         onSelect: async () => {
           if (workspaceId == null) return;
-          await invoke('cmd_new_nested_window', {
+          await invokeCmd('cmd_new_nested_window', {
             url: routes.paths.workspaceSettings({ workspaceId }),
             label: 'settings',
             title: 'Yaak Settings',

src-web/components/ExportDataDialog.tsx

@@ -1,9 +1,9 @@
-import { invoke } from '@tauri-apps/api/core';
 import { save } from '@tauri-apps/plugin-dialog';
 import { useCallback, useMemo, useState } from 'react';
 import slugify from 'slugify';
 import type { Workspace } from '../lib/models';
 import { count } from '../lib/pluralize';
+import { invokeCmd } from '../lib/tauri';
 import { Button } from './core/Button';
 import { Checkbox } from './core/Checkbox';
 import { HStack, VStack } from './core/Stacks';
@@ -49,7 +49,7 @@ export function ExportDataDialog({
       return;
     }
 
-    await invoke('cmd_export_data', { workspaceIds: ids, exportPath });
+    await invokeCmd('cmd_export_data', { workspaceIds: ids, exportPath });
     onHide();
     onSuccess(exportPath);
   }, [onHide, onSuccess, selectedWorkspaces, workspaces]);

src-web/components/GraphQLEditor.tsx

@@ -66,7 +66,6 @@ export function GraphQLEditor({ defaultValue, onChange, baseRequest, ...extraEdi
   // Refetch the schema when the URL changes
   useEffect(() => {
     if (editorViewRef.current === null) return;
-    console.log('SET SCHEMA', schema);
     updateSchema(editorViewRef.current, schema ?? undefined);
   }, [schema]);
 

src-web/components/GrpcConnectionLayout.tsx

@@ -17,14 +17,16 @@ interface Props {
   style: CSSProperties;
 }
 
+const emptyArray: string[] = [];
+
 export function GrpcConnectionLayout({ style }: Props) {
   const activeRequest = useActiveRequest('grpc_request');
-  const updateRequest = useUpdateGrpcRequest(activeRequest?.id ?? null);
+  const { mutateAsync: updateRequest } = useUpdateGrpcRequest(activeRequest?.id ?? null);
   const connections = useGrpcConnections(activeRequest?.id ?? null);
   const activeConnection = connections[0] ?? null;
   const messages = useGrpcEvents(activeConnection?.id ?? null);
   const protoFilesKv = useGrpcProtoFiles(activeRequest?.id ?? null);
-  const protoFiles = protoFilesKv.value ?? [];
+  const protoFiles = protoFilesKv.value ?? emptyArray;
   const grpc = useGrpc(activeRequest, activeConnection, protoFiles);
 
   const services = grpc.reflect.data ?? null;
@@ -32,7 +34,7 @@ export function GrpcConnectionLayout({ style }: Props) {
     if (services == null || activeRequest == null) return;
     const s = services.find((s) => s.name === activeRequest.service);
     if (s == null) {
-      updateRequest.mutate({
+      updateRequest({
         service: services[0]?.name ?? null,
         method: services[0]?.methods[0]?.name ?? null,
       });
@@ -41,7 +43,7 @@ export function GrpcConnectionLayout({ style }: Props) {
 
     const m = s.methods.find((m) => m.name === activeRequest.method);
     if (m == null) {
-      updateRequest.mutate({ method: s.methods[0]?.name ?? null });
+      updateRequest({ method: s.methods[0]?.name ?? null });
       return;
     }
   }, [activeRequest, services, updateRequest]);

src-web/components/Settings/SettingsDesign.tsx

@@ -1,9 +1,9 @@
-import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-dialog';
 import React, { useState } from 'react';
 import { useLocalStorage } from 'react-use';
 import { useThemes } from '../../hooks/useThemes';
 import { capitalize } from '../../lib/capitalize';
+import { invokeCmd } from '../../lib/tauri';
 import { yaakDark } from '../../lib/theme/themes/yaak';
 import { getThemeCSS } from '../../lib/theme/window';
 import { Banner } from '../core/Banner';
@@ -58,11 +58,11 @@ export function SettingsDesign() {
       const coreThemeCSS = [yaakDark].map(getThemeCSS).join('\n\n');
 
       try {
-        await invoke('cmd_write_file_dev', {
+        await invokeCmd('cmd_write_file_dev', {
           pathname: exportDir + '/themes-all.css',
           contents: allThemesCSS,
         });
-        await invoke('cmd_write_file_dev', {
+        await invokeCmd('cmd_write_file_dev', {
           pathname: exportDir + '/themes-slim.css',
           contents: coreThemeCSS,
         });

src-web/components/SettingsDropdown.tsx

@@ -1,4 +1,3 @@
-import { invoke } from '@tauri-apps/api/core';
 import { open } from '@tauri-apps/plugin-shell';
 import { useRef } from 'react';
 import { useActiveWorkspaceId } from '../hooks/useActiveWorkspaceId';
@@ -8,6 +7,7 @@ import { useCheckForUpdates } from '../hooks/useCheckForUpdates';
 import { useExportData } from '../hooks/useExportData';
 import { useImportData } from '../hooks/useImportData';
 import { useListenToTauriEvent } from '../hooks/useListenToTauriEvent';
+import { invokeCmd } from '../lib/tauri';
 import type { DropdownRef } from './core/Dropdown';
 import { Dropdown } from './core/Dropdown';
 import { Icon } from './core/Icon';
@@ -27,7 +27,7 @@ export function SettingsDropdown() {
 
   const showSettings = async () => {
     if (!workspaceId) return;
-    await invoke('cmd_new_nested_window', {
+    await invokeCmd('cmd_new_nested_window', {
       url: routes.paths.workspaceSettings({ workspaceId }),
       label: 'settings',
       title: 'Yaak Settings',