46 lines
995 B
TypeScript
46 lines
995 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('/')({
|
|
component: Index
|
|
});
|
|
|
|
function Index() {
|
|
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
|
|
}
|
|
}
|
|
`;
|