spring-graphql-demo/client/src/App.tsx

100 lines
2.1 KiB
TypeScript
Raw Normal View History

import React from 'react';
import './App.less';
import {gql, useQuery, useSubscription} from "@apollo/client";
import { Table } from 'antd';
interface User {
id: number
code: string
name: string
}
interface Account {
id: number
code: string
balance: number
user: User
}
interface AccountResult {
fetchAccounts: Array<Account>
}
const ACCOUNTS = gql`
{
fetchAccounts {
id
code
balance
user {
code
name
}
}
}
`
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} = useSubscription<AccountResult>(SUB_ACCOUNTS)
// const {error, loading, data} = useSubscription(HELLO)
console.log(data)
return (
<>
<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>
// </>
// )
// )
<Table dataSource={data.fetchAccounts} columns={accountColumns}/>
// <p>{`${data.hello}`}</p>
}
</>
);
}
export default App;