Some fixes after upgrading react-query

src-tauri/src/lib.rs

@@ -91,16 +91,19 @@ struct AppMetaData {
     version: String,
     name: String,
     app_data_dir: String,
+    app_log_dir: String,
 }
 
 #[tauri::command]
 async fn cmd_metadata(app_handle: AppHandle) -> Result<AppMetaData, ()> {
     let app_data_dir = app_handle.path().app_data_dir().unwrap();
+    let app_log_dir = app_handle.path().app_log_dir().unwrap();
     return Ok(AppMetaData {
         is_dev: is_dev(),
         version: app_handle.package_info().version.to_string(),
         name: app_handle.package_info().name.to_string(),
         app_data_dir: app_data_dir.to_string_lossy().to_string(),
+        app_log_dir: app_log_dir.to_string_lossy().to_string(),
     });
 }
 

src-web/components/App.tsx

@@ -7,7 +7,6 @@ import { HelmetProvider } from 'react-helmet-async';
 import { AppRouter } from './AppRouter';
 
 const queryClient = new QueryClient({
-  logger: undefined,
   defaultOptions: {
     queries: {
       retry: false,

src-web/components/GrpcConnectionLayout.tsx

@@ -94,7 +94,7 @@ export function GrpcConnectionLayout({ style }: Props) {
         />
       )}
       secondSlot={({ style }) =>
-        !grpc.go.isLoading && (
+        !grpc.go.isPending && (
           <div
             style={style}
             className={classNames(

src-web/components/GrpcProtoSelection.tsx

@@ -71,7 +71,7 @@ export function GrpcProtoSelection({ requestId }: Props) {
         {!serverReflection && services != null && services.length > 0 && (
           <Banner className="flex flex-col gap-2">
             <p>
-              Found services
+              Found services{' '}
               {services?.slice(0, 5).map((s, i) => {
                 return (
                   <span key={i}>
@@ -124,7 +124,6 @@ export function GrpcProtoSelection({ requestId }: Props) {
                       className="ml-auto opacity-30 transition-opacity group-hover:opacity-100"
                       onClick={async () => {
                         await protoFilesKv.set(protoFiles.filter((p) => p !== f));
-                        grpc.reflect.remove();
                       }}
                     />
                   </td>

src-web/components/SettingsDialog.tsx

@@ -81,7 +81,7 @@ export const SettingsDialog = () => {
           size="sm"
           title="Check for updates"
           icon="refresh"
-          spin={checkForUpdates.isLoading}
+          spin={checkForUpdates.isPending}
           onClick={() => checkForUpdates.mutateAsync()}
         />
       </div>
@@ -135,6 +135,7 @@ export const SettingsDialog = () => {
       <KeyValueRows>
         <KeyValueRow label="Version" value={appInfo.data?.version} />
         <KeyValueRow label="Data Directory" value={appInfo.data?.appDataDir} />
+        <KeyValueRow label="Logs Directory" value={appInfo.data?.appLogDir} />
       </KeyValueRows>
     </VStack>
   );

src-web/hooks/useAppInfo.ts

@@ -1,13 +1,20 @@
 import { useQuery } from '@tanstack/react-query';
 import { invoke } from '@tauri-apps/api/core';
 
+export interface AppInfo {
+  isDev: boolean;
+  version: string;
+  name: string;
+  appDataDir: string;
+  appLogDir: string;
+}
+
 export function useAppInfo() {
-  return useQuery(['appInfo'], async () => {
+  return useQuery({
-    return (await invoke('cmd_metadata')) as {
+    queryKey: ['appInfo'],
-      isDev: boolean;
+    queryFn: async () => {
-      version: string;
+      const metadata = await invoke('cmd_metadata');
-      name: string;
+      return metadata as AppInfo;
-      appDataDir: string;
+    },
-    };
   });
 }

src-web/hooks/useCreateFolder.ts

@@ -35,7 +35,9 @@ export function useCreateFolder() {
     },
     onSettled: () => trackEvent('folder', 'create'),
     onSuccess: async (request) => {
-      await queryClient.invalidateQueries(foldersQueryKey({ workspaceId: request.workspaceId }));
+      await queryClient.invalidateQueries({
+        queryKey: foldersQueryKey({ workspaceId: request.workspaceId }),
+      });
     },
   });
 }

src-web/hooks/useDeleteFolder.tsx

@@ -36,8 +36,8 @@ export function useDeleteFolder(id: string | null) {
       const { workspaceId } = folder;
 
       // Nesting makes it hard to clean things up, so just clear everything that could have been deleted
-      await queryClient.invalidateQueries(httpRequestsQueryKey({ workspaceId }));
+      await queryClient.invalidateQueries({ queryKey: httpRequestsQueryKey({ workspaceId }) });
-      await queryClient.invalidateQueries(foldersQueryKey({ workspaceId }));
+      await queryClient.invalidateQueries({ queryKey: foldersQueryKey({ workspaceId }) });
     },
   });
 }

src-web/hooks/useDeleteWorkspace.tsx

@@ -44,7 +44,7 @@ export function useDeleteWorkspace(workspace: Workspace | null) {
 
       // Also clean up other things that may have been deleted
       queryClient.setQueryData(httpRequestsQueryKey({ workspaceId }), []);
-      await queryClient.invalidateQueries(httpRequestsQueryKey({ workspaceId }));
+      await queryClient.invalidateQueries({ queryKey: httpRequestsQueryKey({ workspaceId }) });
     },
   });
 }

src-web/hooks/useGrpc.ts

@@ -46,7 +46,7 @@ export function useGrpc(
   const debouncedUrl = useDebouncedValue<string>(req?.url ?? 'n/a', 500);
   const reflect = useQuery<ReflectResponseService[], string>({
     enabled: req != null,
-    queryKey: ['grpc_reflect', req?.id ?? 'n/a', debouncedUrl],
+    queryKey: ['grpc_reflect', req?.id ?? 'n/a', debouncedUrl, protoFiles],
     refetchOnWindowFocus: false,
     queryFn: async () => {
       return (await minPromiseMillis(

src-web/hooks/useWorkspaces.ts

@@ -9,8 +9,12 @@ export function workspacesQueryKey(_?: {}) {
 
 export function useWorkspaces() {
   return (
-    useQuery(workspacesQueryKey(), async () => {
+    useQuery({
-      return (await invoke('cmd_list_workspaces')) as Workspace[];
+      queryKey: workspacesQueryKey(),
+      queryFn: async () => {
+        const workspaces = await invoke('cmd_list_workspaces');
+        return workspaces as Workspace[];
+      },
     }).data ?? []
   );
 }

vite.config.ts

@@ -4,7 +4,7 @@ import { internalIpV4 } from 'internal-ip';
 import svgr from 'vite-plugin-svgr';
 import topLevelAwait from 'vite-plugin-top-level-await';
 
-const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM);
+const mobile = !!/android|ios/.exec(process.env.TAURI_ENV_PLATFORM ?? '');
 
 // https://vitejs.dev/config/
 export default defineConfig(async () => ({