refactor: rewrite useConfig with RQ

packages/web/src/components/CustomLogo/index.ee.jsx

@@ -1,10 +1,14 @@
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import { LogoImage } from './style.ee';
 
 const CustomLogo = () => {
-  const { config, loading } = useConfig(['logo.svgData']);
-  if (loading || !config?.['logo.svgData']) return null;
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
+
+  if (isLoading || !config?.['logo.svgData']) return null;
+
   const logoSvgData = config['logo.svgData'];
+
   return (
     <LogoImage
       data-test="custom-logo"

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

@@ -15,7 +15,7 @@ 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';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 
 const drawerLinks = [
   {
@@ -77,11 +77,9 @@ const generateDrawerBottomLinks = async ({
 
 export default function PublicLayout({ children }) {
   const version = useVersion();
-  const { config, loading } = useConfig([
-    'disableNotificationsPage',
-    'additionalDrawerLink',
-    'additionalDrawerLinkText',
-  ]);
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
+
   const theme = useTheme();
   const formatMessage = useFormatMessage();
   const [bottomLinks, setBottomLinks] = React.useState([]);
@@ -102,10 +100,10 @@ export default function PublicLayout({ children }) {
       setBottomLinks(newBottomLinks);
     }
 
-    if (loading) return;
+    if (isLoading) return;
 
     perform();
-  }, [config, loading, version.newVersionCount]);
+  }, [config, isLoading, version.newVersionCount]);
 
   return (
     <>

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

@@ -1,12 +1,19 @@
 import * as React from 'react';
+
 import CustomLogo from 'components/CustomLogo/index.ee';
 import DefaultLogo from 'components/DefaultLogo';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+
 const Logo = () => {
-  const { config, loading } = useConfig(['logo.svgData']);
+  const { data: configData, isLoading } = useAutomatischConfig();
+  const config = configData?.data;
   const logoSvgData = config?.['logo.svgData'];
-  if (loading && !logoSvgData) return <React.Fragment />;
+
+  if (isLoading && !logoSvgData) return <React.Fragment />;
+
   if (logoSvgData) return <CustomLogo />;
+
   return <DefaultLogo />;
 };
+
 export default Logo;

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

@@ -1,15 +1,22 @@
 import * as React from 'react';
-import useConfig from 'hooks/useConfig';
+
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
+
 const MetadataProvider = ({ children }) => {
-  const { config } = useConfig();
+  const { data: configData } = useAutomatischConfig();
+  const config = configData?.data;
+
   React.useEffect(() => {
     document.title = config?.title || 'Automatisch';
   }, [config?.title]);
+
   React.useEffect(() => {
     const existingFaviconElement = document.querySelector("link[rel~='icon']");
+
     if (config?.disableFavicon === true) {
       existingFaviconElement?.remove();
     }
+
     if (config?.disableFavicon === false) {
       if (existingFaviconElement) {
         existingFaviconElement.href = '/browser-tab.ico';
@@ -20,7 +27,10 @@ const MetadataProvider = ({ children }) => {
         newFaviconElement.href = '/browser-tab.ico';
       }
     }
+    
   }, [config?.disableFavicon]);
+
   return <>{children}</>;
 };
+
 export default MetadataProvider;

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

@@ -6,7 +6,7 @@ import set from 'lodash/set';
 import * as React from 'react';
 
 import useAutomatischInfo from 'hooks/useAutomatischInfo';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import { defaultTheme, mationTheme } from 'styles/theme';
 
 const customizeTheme = (theme, config) => {
@@ -28,7 +28,8 @@ const ThemeProvider = ({ children, ...props }) => {
   const { data: automatischInfo, isPending: isAutomatischInfoPending } =
     useAutomatischInfo();
   const isMation = automatischInfo?.data.isMation;
-  const { config, loading: configLoading } = useConfig();
+  const { data: configData, isLoading: configLoading } = useAutomatischConfig();
+  const config = configData?.data;
 
   const customTheme = React.useMemo(() => {
     const installationTheme = isMation ? mationTheme : defaultTheme;
@@ -51,4 +52,5 @@ const ThemeProvider = ({ children, ...props }) => {
     </BaseThemeProvider>
   );
 };
+
 export default ThemeProvider;

packages/web/src/graphql/queries/get-config.ee.js

@@ -1,6 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_CONFIG = gql`
-  query GetConfig($keys: [String]) {
-    getConfig(keys: $keys)
-  }
-`;

packages/web/src/hooks/useAutomatischConfig.js

@@ -0,0 +1,16 @@
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
+export default function useAutomatischConfig() {
+  const query = useQuery({
+    queryKey: ['automatisch', 'config'],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/automatisch/config`, {
+        signal,
+      });
+      return data;
+    },
+  });
+
+  return query;
+}

packages/web/src/hooks/useConfig.js

@@ -1,11 +0,0 @@
-import { useQuery } from '@apollo/client';
-import { GET_CONFIG } from 'graphql/queries/get-config.ee';
-export default function useConfig(keys) {
-  const { data, loading } = useQuery(GET_CONFIG, {
-    variables: { keys },
-  });
-  return {
-    config: data?.getConfig,
-    loading,
-  };
-}

packages/web/src/pages/UserInterface/index.jsx

@@ -3,43 +3,44 @@ import LoadingButton from '@mui/lab/LoadingButton';
 import Grid from '@mui/material/Grid';
 import Skeleton from '@mui/material/Skeleton';
 import Stack from '@mui/material/Stack';
-import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import merge from 'lodash/merge';
 import * as React from 'react';
+import { useQueryClient } from '@tanstack/react-query';
+
 import ColorInput from 'components/ColorInput';
 import Container from 'components/Container';
 import Form from 'components/Form';
 import PageTitle from 'components/PageTitle';
 import TextField from 'components/TextField';
 import { UPDATE_CONFIG } from 'graphql/mutations/update-config.ee';
-import { GET_CONFIG } from 'graphql/queries/get-config.ee';
 import nestObject from 'helpers/nestObject';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import useFormatMessage from 'hooks/useFormatMessage';
+import useEnqueueSnackbar from 'hooks/useEnqueueSnackbar';
 import {
   primaryDarkColor,
   primaryLightColor,
   primaryMainColor,
 } from 'styles/theme';
+
 const getPrimaryMainColor = (color) => color || primaryMainColor;
 const getPrimaryDarkColor = (color) => color || primaryDarkColor;
 const getPrimaryLightColor = (color) => color || primaryLightColor;
+
 const defaultValues = {
   title: 'Automatisch',
   'palette.primary.main': primaryMainColor,
   'palette.primary.dark': primaryDarkColor,
   'palette.primary.light': primaryLightColor,
 };
+
 export default function UserInterface() {
   const formatMessage = useFormatMessage();
   const [updateConfig, { loading }] = useMutation(UPDATE_CONFIG);
-  const { config, loading: configLoading } = useConfig([
-    'title',
-    'palette.primary.main',
-    'palette.primary.light',
-    'palette.primary.dark',
-    'logo.svgData',
-  ]);
+  const { data: configData, isLoading: configLoading } = useAutomatischConfig();
+  const config = configData?.data;
+  const queryClient = useQueryClient();
+
   const enqueueSnackbar = useEnqueueSnackbar();
   const configWithDefaults = merge({}, defaultValues, nestObject(config));
   const handleUserInterfaceUpdate = async (uiData) => {
@@ -64,37 +65,9 @@ export default function UserInterface() {
         optimisticResponse: {
           updateConfig: input,
         },
-        update: async function (cache, { data: { updateConfig } }) {
-          const newConfigWithDefaults = merge({}, defaultValues, updateConfig);
-          cache.writeQuery({
-            query: GET_CONFIG,
-            data: {
-              getConfig: newConfigWithDefaults,
-            },
-          });
-          cache.writeQuery({
-            query: GET_CONFIG,
-            data: {
-              getConfig: newConfigWithDefaults,
-            },
-            variables: {
-              keys: ['logo.svgData'],
-            },
-          });
-          cache.writeQuery({
-            query: GET_CONFIG,
-            data: {
-              getConfig: newConfigWithDefaults,
-            },
-            variables: {
-              keys: [
-                'title',
-                'palette.primary.main',
-                'palette.primary.light',
-                'palette.primary.dark',
-                'logo.svgData',
-              ],
-            },
+        update: async function () {
+          queryClient.invalidateQueries({
+            queryKey: ['automatisch', 'config'],
           });
         },
       });

packages/web/src/routes.jsx

@@ -1,4 +1,5 @@
 import { Route, Routes as ReactRouterRoutes, Navigate } from 'react-router-dom';
+
 import Layout from 'components/Layout';
 import NoResultFound from 'components/NotFound';
 import PublicLayout from 'components/PublicLayout';
@@ -19,11 +20,14 @@ import * as URLS from 'config/urls';
 import settingsRoutes from './settingsRoutes';
 import adminSettingsRoutes from './adminSettingsRoutes';
 import Notifications from 'pages/Notifications';
-import useConfig from 'hooks/useConfig';
+import useAutomatischConfig from 'hooks/useAutomatischConfig';
 import useAuthentication from 'hooks/useAuthentication';
+
 function Routes() {
-  const { config } = useConfig();
+  const { data: configData } = useAutomatischConfig();
   const { isAuthenticated } = useAuthentication();
+  const config = configData?.data;
+
   return (
     <ReactRouterRoutes>
       <Route
@@ -147,4 +151,5 @@ function Routes() {
     </ReactRouterRoutes>
   );
 }
+
 export default <Routes />;