table grid display, SQL for browse table is generated on FE

packages/web/src/utility/useFetch.js

@@ -1,16 +1,18 @@
 import React from 'react';
+import _ from 'lodash';
 import axios from './axios';
 import useSocket from './SocketProvider';
 import stableStringify from 'json-stable-stringify';
 
 export default function useFetch({
   url,
+  data = undefined,
   params = undefined,
   defaultValue = undefined,
   reloadTrigger = undefined,
   ...config
 }) {
-  const [value, setValue] = React.useState(defaultValue);
+  const [value, setValue] = React.useState([defaultValue, []]);
   const [loadCounter, setLoadCounter] = React.useState(0);
   const socket = useSocket();
 
@@ -18,24 +20,30 @@ export default function useFetch({
     setLoadCounter(loadCounter + 1);
   };
 
-  async function loadValue() {
+  const indicators = [url, stableStringify(data), stableStringify(params), loadCounter];
+
+  async function loadValue(loadedIndicators) {
     const resp = await axios.request({
       method: 'get',
       params,
       url,
+      data,
       ...config,
     });
-    setValue(resp.data);
+    setValue([resp.data, loadedIndicators]);
   }
   React.useEffect(() => {
-    loadValue();
+    loadValue(indicators);
     if (reloadTrigger && socket) {
       socket.on(reloadTrigger, handleReload);
       return () => {
         socket.off(reloadTrigger, handleReload);
       };
     }
-  }, [url, stableStringify(params), socket, loadCounter]);
+  }, [...indicators, socket]);
 
-  return value;
+  const [returnValue, loadedIndicators] = value;
+  if (_.isEqual(indicators, loadedIndicators)) return returnValue;
+
+  return defaultValue;
 }