refactor: rewrite get app connections with RQ

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

@@ -1,20 +1,19 @@
 import * as React from 'react';
 import PropTypes from 'prop-types';
-import { useQuery } from '@apollo/client';
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
+
 import AppConnectionRow from 'components/AppConnectionRow';
 import NoResultFound from 'components/NoResultFound';
 import useFormatMessage from 'hooks/useFormatMessage';
 import * as URLS from 'config/urls';
+import useAppConnections from 'hooks/useAppConnections';
 
 function AppConnections(props) {
   const { appKey } = props;
   const formatMessage = useFormatMessage();
-  const { data } = useQuery(GET_APP_CONNECTIONS, {
-    variables: { key: appKey },
-  });
-  const appConnections = data?.getApp?.connections || [];
+  const { data } = useAppConnections(appKey);
+  const appConnections = data?.data || [];
   const hasConnections = appConnections?.length;
+
   if (!hasConnections) {
     return (
       <NoResultFound

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

@@ -1,5 +1,5 @@
 import PropTypes from 'prop-types';
-import { useLazyQuery, useQuery } from '@apollo/client';
+import { useLazyQuery } from '@apollo/client';
 import Autocomplete from '@mui/material/Autocomplete';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
@@ -12,7 +12,6 @@ import AppAuthClientsDialog from 'components/AppAuthClientsDialog/index.ee';
 import FlowSubstepTitle from 'components/FlowSubstepTitle';
 import useAppConfig from 'hooks/useAppConfig.ee';
 import { EditorContext } from 'contexts/Editor';
-import { GET_APP_CONNECTIONS } from 'graphql/queries/get-app-connections';
 import { TEST_CONNECTION } from 'graphql/queries/test-connection';
 import useAuthenticateApp from 'hooks/useAuthenticateApp.ee';
 import useFormatMessage from 'hooks/useFormatMessage';
@@ -23,6 +22,7 @@ import {
 } from 'propTypes/propTypes';
 import useStepConnection from 'hooks/useStepConnection';
 import { useQueryClient } from '@tanstack/react-query';
+import useAppConnections from 'hooks/useAppConnections';
 
 const ADD_CONNECTION_VALUE = 'ADD_CONNECTION';
 const ADD_SHARED_CONNECTION_VALUE = 'ADD_SHARED_CONNECTION';
@@ -60,9 +60,11 @@ function ChooseConnectionSubstep(props) {
     useShared: true,
   });
 
-  const { data, loading, refetch } = useQuery(GET_APP_CONNECTIONS, {
-    variables: { key: appKey },
-  });
+  const {
+    data,
+    isLoading: isAppConnectionsLoading,
+    refetch,
+  } = useAppConnections(appKey);
 
   const { data: appConfig } = useAppConfig(application.key);
 
@@ -91,11 +93,10 @@ function ChooseConnectionSubstep(props) {
   }, []);
 
   const connectionOptions = React.useMemo(() => {
-    const appWithConnections = data?.getApp;
+    const appWithConnections = data?.data;
     const options =
-      appWithConnections?.connections?.map((connection) =>
-        optionGenerator(connection),
-      ) || [];
+      appWithConnections?.map((connection) => optionGenerator(connection)) ||
+      [];
 
     if (!appConfig?.data || appConfig?.data?.canCustomConnect) {
       options.push({
@@ -242,7 +243,7 @@ function ChooseConnectionSubstep(props) {
             )}
             value={getOption(connectionOptions, stepConnection?.id)}
             onChange={handleChange}
-            loading={loading}
+            loading={isAppConnectionsLoading}
             data-test="choose-connection-autocomplete"
           />
 

packages/web/src/graphql/queries/get-app-connections.js

@@ -1,20 +0,0 @@
-import { gql } from '@apollo/client';
-export const GET_APP_CONNECTIONS = gql`
-  query GetAppConnections($key: String!) {
-    getApp(key: $key) {
-      key
-      connections {
-        id
-        key
-        reconnectable
-        appAuthClientId
-        verified
-        flowCount
-        formattedData {
-          screenName
-        }
-        createdAt
-      }
-    }
-  }
-`;

packages/web/src/hooks/useAppConnections.js

@@ -0,0 +1,19 @@
+import { useQuery } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+
+export default function useAppConnections(appKey) {
+  const query = useQuery({
+    queryKey: ['appConnections', appKey],
+    queryFn: async ({ signal }) => {
+      const { data } = await api.get(`/v1/apps/${appKey}/connections`, {
+        signal,
+      });
+
+      return data;
+    },
+    enabled: !!appKey,
+  });
+
+  return query;
+}

packages/web/src/propTypes/propTypes.js

@@ -210,7 +210,7 @@ export const ConnectionPropType = PropTypes.shape({
   count: PropTypes.number,
   flowCount: PropTypes.number,
   appData: AppPropType,
-  createdAt: PropTypes.string,
+  createdAt: PropTypes.number,
   reconnectable: PropTypes.bool,
   appAuthClientId: PropTypes.string,
 });
@@ -236,6 +236,7 @@ export const FlowPropType = PropTypes.shape({
   active: PropTypes.bool,
   status: PropTypes.oneOf(['paused', 'published', 'draft']),
   createdAt: PropTypes.oneOfType([
+    PropTypes.number,
     PropTypes.string,
     PropTypes.instanceOf(Date),
   ]),