66 lines
1.3 KiB
TypeScript
66 lines
1.3 KiB
TypeScript
import React from 'react';
|
|
import './App.css';
|
|
import {gql, useQuery, useSubscription} from "@apollo/client";
|
|
|
|
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 HELLO = gql`
|
|
subscription {
|
|
hello
|
|
}
|
|
`
|
|
|
|
function App() {
|
|
const {error, loading, data} = useQuery<AccountResult>(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>
|
|
</>
|
|
)
|
|
)
|
|
// <p>{`${data.hello}`}</p>
|
|
}
|
|
</>
|
|
);
|
|
}
|
|
|
|
export default App;
|