Task: Add query for account with completable future and want to test with flux and fetch accounts with subscriptions

client/src/App.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import './App.less';
 import {gql, useQuery, useSubscription} from "@apollo/client";
+import { Table } from 'antd';
 
 interface User {
     id: number
@@ -33,14 +34,46 @@ const ACCOUNTS = gql`
     }
 `
 
+const SUB_ACCOUNTS = gql`
+    subscription {
+        fetchAccounts {
+            id
+            code
+            balance
+            user {
+                code
+                name
+            }
+        }
+    }
+`
+
 const HELLO = gql`
     subscription {
         hello
     }
 `
 
+const accountColumns = [
+    {
+        title: "Account ID",
+        dataIndex: "id",
+        key: "id",
+    },
+    {
+        title: "Account Code",
+        dataIndex: "code",
+        key: "code",
+    },
+    {
+        title: "User",
+        dataIndex: ["user", "name"],
+        key: "user.name",
+    }
+]
 function App() {
-    const {error, loading, data} = useQuery<AccountResult>(ACCOUNTS)
+    // const {error, loading, data} = useQuery<AccountResult>(ACCOUNTS)
+    const {error, loading, data} = useSubscription<AccountResult>(SUB_ACCOUNTS)
     // const {error, loading, data} = useSubscription(HELLO)
     console.log(data)
     return (
@@ -48,14 +81,15 @@ function App() {
             <h1>Accounts</h1>
             {
                 loading || !data ? <p>Loading...</p> :
-                    data.fetchAccounts.map(account => (
-                            <>
-                                <div>Account ID: {account.id}</div>
-                                <div>Account Code: {account.code}</div>
-                                <div>Account User: {account.user.name}</div>
-                            </>
-                        )
-                    )
+                    // data.fetchAccounts.map(account => (
+                    //         <>
+                    //             <div>Account ID: {account.id}</div>
+                    //             <div>Account Code: {account.code}</div>
+                    //             <div>Account User: {account.user.name}</div>
+                    //         </>
+                    //     )
+                    // )
+                <Table dataSource={data.fetchAccounts} columns={accountColumns}/>
                 // <p>{`${data.hello}`}</p>
             }
         </>