46 lines
1,003 B
TypeScript
46 lines
1,003 B
TypeScript
import { Box, Button, Stack, Text } from '@chakra-ui/react'
|
|
import { createFileRoute } from '@tanstack/react-router'
|
|
|
|
import { gql, useQuery } from '@apollo/client'
|
|
|
|
import { BooksManyQuery } from '@generated/types'
|
|
|
|
export const Route = createFileRoute('/example')({
|
|
component: Dashboard,
|
|
})
|
|
|
|
function Dashboard() {
|
|
const { data, refetch } = useQuery<BooksManyQuery>(getBooksQuery)
|
|
|
|
return (
|
|
<Stack>
|
|
<Text>Hello world!</Text>
|
|
<Text>This is my template!</Text>
|
|
<Stack>
|
|
{data && (
|
|
<>
|
|
{data.booksMany.map((book: any) => (
|
|
<Stack key={book.id}>
|
|
<Text>{book.title}</Text>
|
|
<Text>{book.author}</Text>
|
|
</Stack>
|
|
))}
|
|
</>
|
|
)}
|
|
<Box>
|
|
<Button onClick={async () => refetch()}>Refetch</Button>
|
|
</Box>
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
const getBooksQuery = gql`
|
|
query BooksMany {
|
|
booksMany {
|
|
id
|
|
author
|
|
title
|
|
}
|
|
}
|
|
`
|