Refactored useQuery functions.

src/app/(main)/websites/[id]/WebsiteChart.js

@@ -12,12 +12,12 @@ export function WebsiteChart({ websiteId }) {
   } = useNavigation();
   const { get, useQuery } = useApi();
 
-  const { data, isLoading } = useQuery(
-    [
+  const { data, isLoading } = useQuery({
+    queryKey: [
       'websites:pageviews',
       { websiteId, modified, url, referrer, os, browser, device, country, region, city, title },
     ],
-    () =>
+    queryFn: () =>
       get(`/websites/${websiteId}/pageviews`, {
         startAt: +startDate,
         endAt: +endDate,
@@ -33,7 +33,7 @@ export function WebsiteChart({ websiteId }) {
         city,
         title,
       }),
-  );
+  });
 
   const chartData = useMemo(() => {
     if (data) {

src/app/(main)/websites/[id]/WebsiteMetricsBar.js

@@ -17,12 +17,12 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
     query: { url, referrer, title, os, browser, device, country, region, city },
   } = useNavigation();
 
-  const { data, error, isLoading, isFetched } = useQuery(
-    [
+  const { data, error, isLoading, isFetched } = useQuery({
+    queryKey: [
       'websites:stats',
       { websiteId, modified, url, referrer, title, os, browser, device, country, region, city },
     ],
-    () =>
+    queryFn: () =>
       get(`/websites/${websiteId}/stats`, {
         startAt: +startDate,
         endAt: +endDate,
@@ -36,7 +36,7 @@ export function WebsiteMetricsBar({ websiteId, showFilter = true, sticky }) {
         region,
         city,
       }),
-  );
+  });
 
   const { pageviews, uniques, bounces, totaltime } = data || {};
   const num = Math.min(data && uniques.value, data && bounces.value);

src/app/(main)/websites/[id]/event-data/EventDataMetricsBar.js

@@ -11,15 +11,15 @@ export function EventDataMetricsBar({ websiteId }) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate, modified } = dateRange;
 
-  const { data, error, isLoading, isFetched } = useQuery(
-    ['event-data:stats', { websiteId, startDate, endDate, modified }],
-    () =>
+  const { data, error, isLoading, isFetched } = useQuery({
+    queryKey: ['event-data:stats', { websiteId, startDate, endDate, modified }],
+    queryFn: () =>
       get(`/event-data/stats`, {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
       }),
-  );
+  });
 
   return (
     <div className={styles.container}>

src/app/(main)/websites/[id]/event-data/WebsiteEventData.js

@@ -10,17 +10,17 @@ function useData(websiteId, event) {
   const [dateRange] = useDateRange(websiteId);
   const { startDate, endDate } = dateRange;
   const { get, useQuery } = useApi();
-  const { data, error, isLoading } = useQuery(
-    ['event-data:events', { websiteId, startDate, endDate, event }],
-    () =>
+  const { data, error, isLoading } = useQuery({
+    queryKey: ['event-data:events', { websiteId, startDate, endDate, event }],
+    queryFn: () =>
       get('/event-data/events', {
         websiteId,
         startAt: +startDate,
         endAt: +endDate,
         event,
       }),
-    { enabled: !!(websiteId && startDate && endDate) },
-  );
+    enabled: !!(websiteId && startDate && endDate),
+  });
 
   return { data, error, isLoading };
 }

src/app/(main)/websites/[id]/realtime/Realtime.js

@@ -28,15 +28,13 @@ export function Realtime({ websiteId }) {
   const [currentData, setCurrentData] = useState();
   const { get, useQuery } = useApi();
   const { data: website } = useWebsite(websiteId);
-  const { data, isLoading, error } = useQuery(
-    ['realtime', websiteId],
-    () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
-    {
-      enabled: !!(websiteId && website),
-      refetchInterval: REALTIME_INTERVAL,
-      cache: false,
-    },
-  );
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['realtime', websiteId],
+    queryFn: () => get(`/realtime/${websiteId}`, { startAt: currentData?.timestamp || 0 }),
+    enabled: !!(websiteId && website),
+    refetchInterval: REALTIME_INTERVAL,
+    cache: false,
+  });
 
   useEffect(() => {
     if (data) {

src/app/(main)/websites/[id]/realtime/RealtimeHome.js

@@ -10,7 +10,10 @@ export function RealtimeHome() {
   const { formatMessage, labels, messages } = useMessages();
   const { get, useQuery } = useApi();
   const router = useRouter();
-  const { data, isLoading, error } = useQuery(['websites:me'], () => get('/me/websites'));
+  const { data, isLoading, error } = useQuery({
+    queryKey: ['websites:me'],
+    queryFn: () => get('/me/websites'),
+  });
 
   useEffect(() => {
     if (data?.length) {