Merge pull request #1716 from automatisch/AUT-828

refactor: rewrite useVersion and healthcheck with RQ

packages/web/src/components/Layout/index.jsx

@@ -9,12 +9,14 @@ import SwapCallsIcon from '@mui/icons-material/SwapCalls';
 import HistoryIcon from '@mui/icons-material/History';
 import NotificationsIcon from '@mui/icons-material/Notifications';
 import ArrowBackIosNew from '@mui/icons-material/ArrowBackIosNew';
+
 import * as URLS from 'config/urls';
 import useFormatMessage from 'hooks/useFormatMessage';
 import useVersion from 'hooks/useVersion';
 import AppBar from 'components/AppBar';
 import Drawer from 'components/Drawer';
 import useConfig from 'hooks/useConfig';
+
 const drawerLinks = [
   {
     Icon: SwapCallsIcon,
@@ -35,6 +37,7 @@ const drawerLinks = [
     dataTest: 'executions-page-drawer-link',
   },
 ];
+
 const generateDrawerBottomLinks = async ({
   disableNotificationsPage,
   notificationBadgeContent = 0,
@@ -48,23 +51,30 @@ const generateDrawerBottomLinks = async ({
     to: URLS.UPDATES,
     badgeContent: notificationBadgeContent,
   };
+
   const hasAdditionalDrawerLink =
     additionalDrawerLink && additionalDrawerLinkText;
+
   const additionalDrawerLinkObject = {
     Icon: ArrowBackIosNew,
     primary: additionalDrawerLinkText || '',
     to: additionalDrawerLink || '',
     target: '_blank',
   };
+
   const links = [];
+
   if (!disableNotificationsPage) {
     links.push(notificationsPageLinkObject);
   }
+
   if (hasAdditionalDrawerLink) {
     links.push(additionalDrawerLinkObject);
   }
+
   return links;
 };
+
 export default function PublicLayout({ children }) {
   const version = useVersion();
   const { config, loading } = useConfig([
@@ -79,6 +89,7 @@ export default function PublicLayout({ children }) {
   const [isDrawerOpen, setDrawerOpen] = React.useState(!matchSmallScreens);
   const openDrawer = () => setDrawerOpen(true);
   const closeDrawer = () => setDrawerOpen(false);
+
   React.useEffect(() => {
     async function perform() {
       const newBottomLinks = await generateDrawerBottomLinks({
@@ -90,9 +101,12 @@ export default function PublicLayout({ children }) {
       });
       setBottomLinks(newBottomLinks);
     }
+
     if (loading) return;
+
     perform();
   }, [config, loading, version.newVersionCount]);
+
   return (
     <>
       <AppBar

packages/web/src/graphql/queries/healthcheck.js

@@ -1,8 +0,0 @@
-import { gql } from '@apollo/client';
-export const HEALTHCHECK = gql`
-  query Healthcheck {
-    healthcheck {
-      version
-    }
-  }
-`;

packages/web/src/hooks/useVersion.js

@@ -1,11 +1,23 @@
-import { useQuery } from '@apollo/client';
 import { compare } from 'compare-versions';
-import { HEALTHCHECK } from 'graphql/queries/healthcheck';
+import { useQuery } from '@tanstack/react-query';
+
 import useNotifications from 'hooks/useNotifications';
+import api from 'helpers/api';
+
 export default function useVersion() {
   const { notifications } = useNotifications();
-  const { data } = useQuery(HEALTHCHECK, { fetchPolicy: 'cache-and-network' });
-  const version = data?.healthcheck.version;
+  const { data } = useQuery({
+    queryKey: ['automatischVersion'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get('/v1/automatisch/version', {
+        signal,
+      });
+
+      return data;
+    },
+  });
+  const version = data?.data?.version;
+
   const newVersionCount = notifications.reduce((count, notification) => {
     if (!version) return 0;
     // an unexpectedly invalid version would throw and thus, try-catch.
@@ -16,6 +28,7 @@ export default function useVersion() {
       return count;
     }
   }, 0);
+
   return {
     version,
     newVersionCount,