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' }}>