refactor: rewrite get-app queries with RQ

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
 import {
   Link,
   Route,
@@ -15,8 +14,8 @@ import Box from '@mui/material/Box';
 import Grid from '@mui/material/Grid';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
+
 import useFormatMessage from 'hooks/useFormatMessage';
-import { GET_APP } from 'graphql/queries/get-app';
 import * as URLS from 'config/urls';
 import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
@@ -25,6 +24,9 @@ import AdminApplicationSettings from 'components/AdminApplicationSettings';
 import AdminApplicationAuthClients from 'components/AdminApplicationAuthClients';
 import AdminApplicationCreateAuthClient from 'components/AdminApplicationCreateAuthClient';
 import AdminApplicationUpdateAuthClient from 'components/AdminApplicationUpdateAuthClient';
+import { useQuery } from '@tanstack/react-query';
+import api from 'helpers/api';
+
 export default function AdminApplication() {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
@@ -43,10 +45,25 @@ export default function AdminApplication() {
     end: false,
   });
   const { appKey } = useParams();
-  const { data, loading } = useQuery(GET_APP, { variables: { key: appKey } });
-  const app = data?.getApp || {};
+
+  const { data, loading } = useQuery({
+    queryKey: ['app', appKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  const app = data?.data || {};
+
   const goToAuthClientsPage = () => navigate('auth-clients');
+
   if (loading) return null;
+
   return (
     <>
       <Container sx={{ py: 3, display: 'flex', justifyContent: 'center' }}>

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

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import { useQuery } from '@apollo/client';
 import {
   Link,
   Route,
@@ -17,9 +16,9 @@ import Grid from '@mui/material/Grid';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
 import AddIcon from '@mui/icons-material/Add';
+
 import useFormatMessage from 'hooks/useFormatMessage';
 import useAppConfig from 'hooks/useAppConfig.ee';
-import { GET_APP } from 'graphql/queries/get-app';
 import * as URLS from 'config/urls';
 import SplitButton from 'components/SplitButton';
 import ConditionalIconButton from 'components/ConditionalIconButton';
@@ -29,6 +28,9 @@ import AddAppConnection from 'components/AddAppConnection';
 import AppIcon from 'components/AppIcon';
 import Container from 'components/Container';
 import PageTitle from 'components/PageTitle';
+import api from 'helpers/api';
+import { useQuery } from '@tanstack/react-query';
+
 const ReconnectConnection = (props) => {
   const { application, onClose } = props;
   const { connectionId } = useParams();
@@ -40,6 +42,7 @@ const ReconnectConnection = (props) => {
     />
   );
 };
+
 export default function Application() {
   const theme = useTheme();
   const matchSmallScreens = useMediaQuery(theme.breakpoints.down('md'));
@@ -52,11 +55,26 @@ export default function Application() {
   const [searchParams] = useSearchParams();
   const { appKey } = useParams();
   const navigate = useNavigate();
-  const { data, loading } = useQuery(GET_APP, { variables: { key: appKey } });
+
+  const { data, loading } = useQuery({
+    queryKey: ['app', appKey],
+    queryFn: async ({ payload, signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  const app = data?.data || {};
+
   const { appConfig } = useAppConfig(appKey);
   const connectionId = searchParams.get('connectionId') || undefined;
+
   const goToApplicationPage = () => navigate('connections');
-  const app = data?.getApp || {};
+
   const connectionOptions = React.useMemo(() => {
     const shouldHaveCustomConnection =
       appConfig?.canConnect && appConfig?.canCustomConnect;
@@ -68,6 +86,7 @@ export default function Application() {
         to: URLS.APP_ADD_CONNECTION(appKey, appConfig?.canConnect),
       },
     ];
+
     if (shouldHaveCustomConnection) {
       options.push({
         label: formatMessage('app.addCustomConnection'),
@@ -76,9 +95,12 @@ export default function Application() {
         to: URLS.APP_ADD_CONNECTION(appKey),
       });
     }
+
     return options;
   }, [appKey, appConfig]);
+
   if (loading) return null;
+
   return (
     <>
       <Box sx={{ py: 3 }}>