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
    }
  }
`;