Updated polling logic.

components/metrics/PageviewsChart.js

@@ -6,7 +6,15 @@ import BarChart from './BarChart';
 import useTheme from 'hooks/useTheme';
 import { THEME_COLORS } from 'lib/constants';
 
-export default function PageviewsChart({ websiteId, data, unit, records, className, loading }) {
+export default function PageviewsChart({
+  websiteId,
+  data,
+  unit,
+  records,
+  className,
+  loading,
+  animationDuration = 300,
+}) {
   const intl = useIntl();
   const [theme] = useTheme();
   const primaryColor = tinycolor(THEME_COLORS[theme].primary);
@@ -76,7 +84,7 @@ export default function PageviewsChart({ websiteId, data, unit, records, classNa
           ]}
           unit={unit}
           records={records}
-          animationDuration={visible ? 300 : 0}
+          animationDuration={visible ? animationDuration : 0}
           onUpdate={handleUpdate}
           loading={loading}
         />

components/pages/RealtimeDashboard.js

@@ -35,11 +35,16 @@ function mapData(data) {
 export default function RealtimeDashboard() {
   const [data, setData] = useState();
   const [website, setWebsite] = useState();
+  const [lastTime, setLastTime] = useState();
   const { data: init, loading } = useFetch('/api/realtime', { type: 'init' });
   const { data: updates } = useFetch(
     '/api/realtime',
-    { type: 'update' },
-    { disabled: !init?.token, interval: 5000, headers: { 'x-umami-token': init?.token } },
+    { type: 'update', start_at: lastTime },
+    {
+      disabled: !init?.token,
+      interval: 5000,
+      headers: { 'x-umami-token': init?.token },
+    },
   );
 
   const chartData = useMemo(() => {
@@ -48,8 +53,6 @@ export default function RealtimeDashboard() {
       const startDate = subMinutes(endDate, 30);
       const unit = 'minute';
 
-      console.log({ data });
-
       return {
         pageviews: getDateArray(mapData(data.pageviews), startDate, endDate, unit),
         sessions: getDateArray(mapData(data.sessions), startDate, endDate, unit),
@@ -70,6 +73,7 @@ export default function RealtimeDashboard() {
         events: filterTime(state.events, time).concat(events),
       }));
     }
+    setLastTime(Date.now());
   }, [updates, init]);
 
   if (!init || loading || !data) {

hooks/useFetch.js

@@ -11,10 +11,7 @@ export default function useFetch(url, params = {}, options = {}) {
   const [error, setError] = useState();
   const [loading, setLoadiing] = useState(false);
   const { basePath } = useRouter();
-  const keys = Object.keys(params)
-    .sort()
-    .map(key => params[key]);
-  const { update = [], onDataLoad = () => {}, disabled, headers } = options;
+  const { update = [], onDataLoad = () => {}, disabled, headers, interval, delay = 0 } = options;
 
   async function loadData() {
     try {
@@ -43,10 +40,11 @@ export default function useFetch(url, params = {}, options = {}) {
   }
 
   useEffect(() => {
+    console.log('effect', params);
     if (url && !disabled) {
-      const { interval, delay = 0 } = options;
-
-      setTimeout(() => loadData(), delay);
+      if (!data) {
+        setTimeout(() => loadData(), delay);
+      }
 
       const id = interval ? setInterval(() => loadData(), interval) : null;
 
@@ -54,7 +52,7 @@ export default function useFetch(url, params = {}, options = {}) {
         clearInterval(id);
       };
     }
-  }, [url, disabled, ...keys, ...update]);
+  }, [data, url, disabled, ...update]);
 
   return { data, status, error, loading };
 }

lib/url.js

@@ -28,3 +28,7 @@ export function getQueryString(params = {}) {
 
   return '';
 }
+
+export function makeUrl(url, params) {
+  return `${url}${getQueryString(params)}`;
+}

lib/web.js

@@ -1,4 +1,4 @@
-import { getQueryString } from './url';
+import { makeUrl } from './url';
 
 export const apiRequest = (method, url, body, headers) =>
   fetch(url, {
@@ -20,10 +20,10 @@ export const apiRequest = (method, url, body, headers) =>
   });
 
 export const get = (url, params, headers) =>
-  apiRequest('get', `${url}${getQueryString(params)}`, undefined, headers);
+  apiRequest('get', makeUrl(url, params), undefined, headers);
 
 export const del = (url, params, headers) =>
-  apiRequest('delete', `${url}${getQueryString(params)}`, undefined, headers);
+  apiRequest('delete', makeUrl(url, params), undefined, headers);
 
 export const post = (url, params, headers) =>
   apiRequest('post', url, JSON.stringify(params), headers);

pages/api/realtime.js

@@ -16,7 +16,7 @@ export default async (req, res) => {
   }
 
   if (req.method === 'GET') {
-    const { type } = req.query;
+    const { type, start_at } = req.query;
     const { user_id } = req.auth;
 
     if (type === 'init') {
@@ -37,7 +37,7 @@ export default async (req, res) => {
 
       const { websites } = await parseToken(token);
 
-      const [pageviews, sessions, events] = await getData(websites, new Date());
+      const [pageviews, sessions, events] = await getData(websites, new Date(+start_at));
 
       return ok(res, { pageviews, sessions, events });
     }