feat: introduce dynamic flow data

packages/web/src/components/AppFlows/index.tsx

@@ -1,14 +1,21 @@
+import { useQuery } from '@apollo/client';
+import { GET_FLOWS } from 'graphql/queries/get-flows';
+
 import AppFlowRow from 'components/AppFlowRow';
+import type { Flow } from 'types/flow';
 
 type AppFlowsProps = {
   appKey: String;
 }
 
 export default function AppFlows(props: AppFlowsProps) {
+  const { data } = useQuery(GET_FLOWS);
+  const appFlows: Flow[] = data?.getFlows || [];
+
   return (
     <>
-      {Array.from(new Array(3)).map((item: any, index: number) => (
-        <AppFlowRow key={index} flow={item} />
+      {appFlows.map((appFlow: Flow) => (
+        <AppFlowRow key={appFlow.id} flow={appFlow} />
       ))}
     </>
   )