Refactored useQuery functions.

src/components/metrics/ActiveUsers.js

@@ -7,14 +7,12 @@ import styles from './ActiveUsers.module.css';
 export function ActiveUsers({ websiteId, value, refetchInterval = 60000 }) {
   const { formatMessage, messages } = useMessages();
   const { get, useQuery } = useApi();
-  const { data } = useQuery(
-    ['websites:active', websiteId],
-    () => get(`/websites/${websiteId}/active`),
-    {
-      refetchInterval,
-      enabled: !!websiteId,
-    },
-  );
+  const { data } = useQuery({
+    queryKey: ['websites:active', websiteId],
+    queryFn: () => get(`/websites/${websiteId}/active`),
+    refetchInterval,
+    enabled: !!websiteId,
+  });
 
   const count = useMemo(() => {
     if (websiteId) {

src/components/metrics/EventsChart.js

@@ -16,17 +16,20 @@ export function EventsChart({ websiteId, className, token }) {
     query: { url, event },
   } = useNavigation();
 
-  const { data, isLoading } = useQuery(['events', websiteId, modified, event], () =>
-    get(`/websites/${websiteId}/events`, {
-      startAt: +startDate,
-      endAt: +endDate,
-      unit,
-      timezone,
-      url,
-      event,
-      token,
-    }),
-  );
+  const { data, isLoading } = useQuery({
+    queryKey: ['events', websiteId, modified, event],
+    queryFn: () =>
+      get(`/websites/${websiteId}/events`, {
+        startAt: +startDate,
+        endAt: +endDate,
+        unit,
+        timezone,
+        url,
+        event,
+        token,
+      }),
+    enabled: !!websiteId,
+  });
 
   const datasets = useMemo(() => {
     if (!data) return [];

src/components/metrics/MetricsTable.js

@@ -35,8 +35,8 @@ export function MetricsTable({
   const { get, useQuery } = useApi();
   const { dir } = useLocale();
 
-  const { data, isLoading, isFetched, error } = useQuery(
-    [
+  const { data, isLoading, isFetched, error } = useQuery({
+    queryKey: [
       'websites:metrics',
       {
         websiteId,
@@ -53,11 +53,13 @@ export function MetricsTable({
         city,
       },
     ],
-    () => {
+    queryFn: () => {
       const filters = { url, title, referrer, os, browser, device, country, region, city };
 
       filters[type] = undefined;
 
+      onDataLoad?.();
+
       return get(`/websites/${websiteId}/metrics`, {
         type,
         startAt: +startDate,
@@ -65,8 +67,8 @@ export function MetricsTable({
         ...filters,
       });
     },
-    { onSuccess: onDataLoad, retryDelay: delay || DEFAULT_ANIMATION_DURATION },
-  );
+    retryDelay: delay || DEFAULT_ANIMATION_DURATION,
+  });
 
   const filteredData = useMemo(() => {
     if (data) {