43 lines
877 B
TypeScript
43 lines
877 B
TypeScript
import { Text, Stack } 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 } = 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>
|
|
))}
|
|
</>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
);
|
|
}
|
|
|
|
const getBooksQuery = gql`
|
|
query BooksMany {
|
|
booksMany {
|
|
id
|
|
author
|
|
title
|
|
}
|
|
}
|
|
`;
|