diff --git a/packages/web/src/datagrid/JslDataGrid.svelte b/packages/web/src/datagrid/JslDataGrid.svelte
index 9a3224e40..a6134f746 100644
--- a/packages/web/src/datagrid/JslDataGrid.svelte
+++ b/packages/web/src/datagrid/JslDataGrid.svelte
@@ -2,8 +2,6 @@
   import { createGridCache, createGridConfig, JslGridDisplay } from 'dbgate-datalib';
   import { writable } from 'svelte/store';
   import { useApiCall } from '../utility/api';
-  import socket from '../utility/socket';
-  import useEffect from '../utility/useEffect';
 
   import DataGrid from './DataGrid.svelte';
   import JslDataGridCore from './JslDataGridCore.svelte';
diff --git a/packages/web/src/datagrid/JslDataGridCore.svelte b/packages/web/src/datagrid/JslDataGridCore.svelte
index fee287647..d61718803 100644
--- a/packages/web/src/datagrid/JslDataGridCore.svelte
+++ b/packages/web/src/datagrid/JslDataGridCore.svelte
@@ -20,7 +20,7 @@
       filters: display ? display.compileFilters() : null,
     });
 
-    return response.data;
+    return response;
   }
 
   function dataPageAvailable(props) {
@@ -41,13 +41,12 @@
   import ImportExportModal from '../modals/ImportExportModal.svelte';
   import { showModal } from '../modals/modalTools';
   import { extensions } from '../stores';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
 
   import { registerMenu } from '../utility/contextMenu';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import createQuickExportMenu from '../utility/createQuickExportMenu';
   import { exportElectronFile } from '../utility/exportElectronFile';
-  import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
 
   import LoadingDataGridCore from './LoadingDataGridCore.svelte';
@@ -75,9 +74,9 @@
   $: effect = useEffect(() => onJslId(jslid));
   function onJslId(jslidVal) {
     if (jslidVal) {
-      socket().on(`jsldata-stats-${jslidVal}`, handleJslDataStats);
+      apiOn(`jsldata-stats-${jslidVal}`, handleJslDataStats);
       return () => {
-        socket().off(`jsldata-stats-${jslidVal}`, handleJslDataStats);
+        apiOff(`jsldata-stats-${jslidVal}`, handleJslDataStats);
       };
     }
   }
diff --git a/packages/web/src/modals/ImportExportModal.svelte b/packages/web/src/modals/ImportExportModal.svelte
index c6474da2b..caefd0d8e 100644
--- a/packages/web/src/modals/ImportExportModal.svelte
+++ b/packages/web/src/modals/ImportExportModal.svelte
@@ -16,10 +16,9 @@
   import RunnerOutputFiles from '../query/RunnerOutputFiles.svelte';
   import SocketMessageView from '../query/SocketMessageView.svelte';
   import { currentArchive, currentDatabase, extensions, selectedWidget } from '../stores';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
   import createRef from '../utility/createRef';
   import openNewTab from '../utility/openNewTab';
-  import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
   import WidgetColumnBar from '../widgets/WidgetColumnBar.svelte';
   import WidgetColumnBarItem from '../widgets/WidgetColumnBarItem.svelte';
@@ -67,9 +66,9 @@
 
   function registerRunnerDone(rid) {
     if (rid) {
-      socket().on(`runner-done-${rid}`, handleRunnerDone);
+      apiOn(`runner-done-${rid}`, handleRunnerDone);
       return () => {
-        socket().off(`runner-done-${rid}`, handleRunnerDone);
+        apiOff(`runner-done-${rid}`, handleRunnerDone);
       };
     } else {
       return () => {};
diff --git a/packages/web/src/query/ResultTabs.svelte b/packages/web/src/query/ResultTabs.svelte
index 6d78cd85a..d18274623 100644
--- a/packages/web/src/query/ResultTabs.svelte
+++ b/packages/web/src/query/ResultTabs.svelte
@@ -6,7 +6,7 @@
   import JslDataGrid from '../datagrid/JslDataGrid.svelte';
   import TabControl from '../elements/TabControl.svelte';
   import { allResultsInOneTabDefault } from '../stores';
-  import socket from '../utility/socket';
+  import { apiOff, apiOn } from '../utility/api';
   import useEffect from '../utility/useEffect';
   import AllResultsTab from './AllResultsTab.svelte';
 
@@ -66,9 +66,9 @@
   });
   function onSession(sid) {
     if (sid) {
-      socket().on(`session-recordset-${sid}`, handleResultSet);
+      apiOn(`session-recordset-${sid}`, handleResultSet);
       return () => {
-        socket().off(`session-recordset-${sid}`, handleResultSet);
+        apiOff(`session-recordset-${sid}`, handleResultSet);
       };
     }
     return () => {};
diff --git a/packages/web/src/query/RunnerOutputFiles.svelte b/packages/web/src/query/RunnerOutputFiles.svelte
index 430c82077..8b5f1e21b 100644
--- a/packages/web/src/query/RunnerOutputFiles.svelte
+++ b/packages/web/src/query/RunnerOutputFiles.svelte
@@ -1,11 +1,11 @@
 <script>
   import ErrorInfo from '../elements/ErrorInfo.svelte';
   import TableControl from '../elements/TableControl.svelte';
+  import { apiOff, apiOn } from '../utility/api';
 
   import formatFileSize from '../utility/formatFileSize';
   import getElectron from '../utility/getElectron';
   import resolveApi from '../utility/resolveApi';
-  import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
 
   export let runnerId;
@@ -21,9 +21,9 @@
 
   function registerRunnerDone(rid) {
     if (rid) {
-      socket().on(`runner-done-${rid}`, handleRunnerDone);
+      apiOn(`runner-done-${rid}`, handleRunnerDone);
       return () => {
-        socket().off(`runner-done-${rid}`, handleRunnerDone);
+        apiOff(`runner-done-${rid}`, handleRunnerDone);
       };
     } else {
       return () => {};
diff --git a/packages/web/src/query/SocketMessageView.svelte b/packages/web/src/query/SocketMessageView.svelte
index 200895146..cc48ffcfa 100644
--- a/packages/web/src/query/SocketMessageView.svelte
+++ b/packages/web/src/query/SocketMessageView.svelte
@@ -1,10 +1,9 @@
 <script lang="ts">
   import _ from 'lodash';
   import ErrorInfo from '../elements/ErrorInfo.svelte';
+  import { apiOff, apiOn } from '../utility/api';
   import createRef from '../utility/createRef';
 
-  import socket from '../utility/socket';
-
   import useEffect from '../utility/useEffect';
 
   import MessageView from './MessageView.svelte';
@@ -30,9 +29,9 @@
 
   $: effect = useEffect(() => {
     if (eventName) {
-      socket().on(eventName, handleInfo);
+      apiOn(eventName, handleInfo);
       return () => {
-        socket().off(eventName, handleInfo);
+        apiOff(eventName, handleInfo);
       };
     }
     return () => {};
diff --git a/packages/web/src/tabs/QueryDesignTab.svelte b/packages/web/src/tabs/QueryDesignTab.svelte
index 54780447e..831e5d43e 100644
--- a/packages/web/src/tabs/QueryDesignTab.svelte
+++ b/packages/web/src/tabs/QueryDesignTab.svelte
@@ -23,7 +23,6 @@
   import { extensions } from '../stores';
   import { changeTab } from '../utility/common';
   import { useConnectionInfo } from '../utility/metadataLoaders';
-  import socket from '../utility/socket';
   import SocketMessageView from '../query/SocketMessageView.svelte';
   import useEffect from '../utility/useEffect';
   import ResultTabs from '../query/ResultTabs.svelte';
@@ -37,7 +36,7 @@
   import QueryDesignColumns from '../elements/QueryDesignColumns.svelte';
   import useTimerLabel from '../utility/useTimerLabel';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
 
   export let tabid;
   export let conid;
@@ -62,9 +61,9 @@
   });
   function onSession(sid) {
     if (sid) {
-      socket().on(`session-done-${sid}`, handleSessionDone);
+      apiOn(`session-done-${sid}`, handleSessionDone);
       return () => {
-        socket().off(`session-done-${sid}`, handleSessionDone);
+        apiOff(`session-done-${sid}`, handleSessionDone);
       };
     }
     return () => {};
diff --git a/packages/web/src/tabs/QueryTab.svelte b/packages/web/src/tabs/QueryTab.svelte
index 8d7cb5e22..c6946bc2b 100644
--- a/packages/web/src/tabs/QueryTab.svelte
+++ b/packages/web/src/tabs/QueryTab.svelte
@@ -54,7 +54,6 @@
   import applyScriptTemplate from '../utility/applyScriptTemplate';
   import { changeTab } from '../utility/common';
   import { getDatabaseInfo, useConnectionInfo } from '../utility/metadataLoaders';
-  import socket from '../utility/socket';
   import SocketMessageView from '../query/SocketMessageView.svelte';
   import useEffect from '../utility/useEffect';
   import ResultTabs from '../query/ResultTabs.svelte';
@@ -68,7 +67,7 @@
   import AceEditor from '../query/AceEditor.svelte';
   import StatusBarTabItem from '../widgets/StatusBarTabItem.svelte';
   import { showSnackbarError } from '../utility/snackbar';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
 
   export let tabid;
   export let conid;
@@ -95,9 +94,9 @@
   });
   function onSession(sid) {
     if (sid) {
-      socket().on(`session-done-${sid}`, handleSessionDone);
+      apiOn(`session-done-${sid}`, handleSessionDone);
       return () => {
-        socket().off(`session-done-${sid}`, handleSessionDone);
+        apiOff(`session-done-${sid}`, handleSessionDone);
       };
     }
     return () => {};
diff --git a/packages/web/src/tabs/ShellTab.svelte b/packages/web/src/tabs/ShellTab.svelte
index 9b684f49e..1159e3a4d 100644
--- a/packages/web/src/tabs/ShellTab.svelte
+++ b/packages/web/src/tabs/ShellTab.svelte
@@ -48,12 +48,11 @@
   import AceEditor from '../query/AceEditor.svelte';
   import RunnerOutputPane from '../query/RunnerOutputPane.svelte';
   import useEditorData from '../query/useEditorData';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
   import { copyTextToClipboard } from '../utility/clipboard';
   import { changeTab } from '../utility/common';
   import createActivator, { getActiveComponent } from '../utility/createActivator';
   import { showSnackbarError } from '../utility/snackbar';
-  import socket from '../utility/socket';
   import useEffect from '../utility/useEffect';
   import useTimerLabel from '../utility/useTimerLabel';
 
@@ -101,9 +100,9 @@
 
   function registerRunnerDone(rid) {
     if (rid) {
-      socket().on(`runner-done-${rid}`, handleRunnerDone);
+      apiOn(`runner-done-${rid}`, handleRunnerDone);
       return () => {
-        socket().off(`runner-done-${rid}`, handleRunnerDone);
+        apiOff(`runner-done-${rid}`, handleRunnerDone);
       };
     } else {
       return () => {};
diff --git a/packages/web/src/utility/api.ts b/packages/web/src/utility/api.ts
index ab12268aa..a64c4bec8 100644
--- a/packages/web/src/utility/api.ts
+++ b/packages/web/src/utility/api.ts
@@ -1,5 +1,6 @@
 import resolveApi, { resolveApiHeaders } from './resolveApi';
 import { writable } from 'svelte/store';
+import socket from './socket';
 
 export async function apiCall(route: string, args: {} = undefined) {
   const resp = await fetch(`${resolveApi()}/${route}`, {
@@ -14,9 +15,13 @@ export async function apiCall(route: string, args: {} = undefined) {
   return resp.json();
 }
 
-export function apiOn(event: string, hander: Function) {}
+export function apiOn(event: string, handler: Function) {
+  socket().on(event, handler);
+}
 
-export function apiOff(event: string, hander: Function) {}
+export function apiOff(event: string, handler: Function) {
+  socket().off(event, handler);
+}
 
 import _ from 'lodash';
 
diff --git a/packages/web/src/utility/exportElectronFile.ts b/packages/web/src/utility/exportElectronFile.ts
index f5c9bddc1..55d1e8da2 100644
--- a/packages/web/src/utility/exportElectronFile.ts
+++ b/packages/web/src/utility/exportElectronFile.ts
@@ -1,9 +1,8 @@
 import ScriptWriter from '../impexp/ScriptWriter';
 import getElectron from './getElectron';
-import socket from '../utility/socket';
 import { showSnackbar, showSnackbarInfo, showSnackbarError, closeSnackbar } from '../utility/snackbar';
 import resolveApi from './resolveApi';
-import { apiCall } from './api';
+import { apiCall, apiOff, apiOn } from './api';
 
 export async function exportElectronFile(dataName, reader, format) {
   const electron = getElectron();
@@ -48,12 +47,12 @@ export async function exportElectronFile(dataName, reader, format) {
 
   function handleRunnerDone() {
     closeSnackbar(snackId);
-    socket().off(`runner-done-${runid}`, handleRunnerDone);
+    apiOff(`runner-done-${runid}`, handleRunnerDone);
     if (isCanceled) showSnackbarError(`Export ${dataName} canceled`);
     else showSnackbarInfo(`Export ${dataName} finished`);
   }
 
-  socket().on(`runner-done-${runid}`, handleRunnerDone);
+  apiOn(`runner-done-${runid}`, handleRunnerDone);
 }
 
 export async function saveFileToDisk(
diff --git a/packages/web/src/utility/metadataLoaders.ts b/packages/web/src/utility/metadataLoaders.ts
index 9aae0cf82..332d85a33 100644
--- a/packages/web/src/utility/metadataLoaders.ts
+++ b/packages/web/src/utility/metadataLoaders.ts
@@ -8,7 +8,7 @@ import { DatabaseInfo } from 'dbgate-types';
 import { derived } from 'svelte/store';
 import { extendDatabaseInfo } from 'dbgate-tools';
 import { setLocalStorage } from '../utility/storageCache';
-import { apiCall } from './api';
+import { apiCall, apiOff, apiOn } from './api';
 
 const databaseInfoLoader = ({ conid, database }) => ({
   url: 'database-connections/structure',
@@ -200,11 +200,11 @@ function useCore(loader, args) {
       handleReload();
       if (reloadTrigger && socket) {
         for (const item of getAsArray(reloadTrigger)) {
-          socket().on(item, handleReload);
+          apiOn(item, handleReload);
         }
         return () => {
           for (const item of getAsArray(reloadTrigger)) {
-            socket().off(item, handleReload);
+            apiOff(item, handleReload);
           }
         };
       }
diff --git a/packages/web/src/widgets/QueryHistoryList.svelte b/packages/web/src/widgets/QueryHistoryList.svelte
index 7133c5547..e9cc00105 100644
--- a/packages/web/src/widgets/QueryHistoryList.svelte
+++ b/packages/web/src/widgets/QueryHistoryList.svelte
@@ -6,10 +6,9 @@
   import WidgetsInnerContainer from '../widgets/WidgetsInnerContainer.svelte';
   import FontIcon from '../icons/FontIcon.svelte';
   import { onMount } from 'svelte';
-  import socket from '../utility/socket';
   import openNewTab from '../utility/openNewTab';
   import CloseSearchButton from '../elements/CloseSearchButton.svelte';
-  import { apiCall } from '../utility/api';
+  import { apiCall, apiOff, apiOn } from '../utility/api';
 
   let filter = '';
   let search = '';
@@ -31,9 +30,9 @@
   $: setDebouncedFilter(filter);
 
   onMount(() => {
-    socket().on('query-history-changed', reloadItems);
+    apiOn('query-history-changed', reloadItems);
     return () => {
-      socket().off('query-history-changed', reloadItems);
+      apiOff('query-history-changed', reloadItems);
     };
   });
 </script>