import { createGraphQLClient, gql } from "@solid-primitives/graphql";
import { Show, For } from 'solid-js';
import genres from '../genres';
import { A, useParams } from '@solidjs/router';
interface BookDetails {
id: string;
title: string;
year: number;
synopsis: string;
genre: string[];
seriesPart: string;
subseriesPart: string;
creatorNames: string[];
creatorIds: string[];
}
interface BookDetailsSnippet {
book: BookDetails
}
export default function BookDetails() {
const newQuery = createGraphQLClient("http://localhost:8080/query");
const params = useParams();
const [data] = newQuery<BookDetailsSnippet >(
gql`
{
book(id: "${params.id}") {
id
title
year
synopsis
genre
seriesPart
subseriesPart
creatorNames
creatorIds
}
}
`
);
return (
<div class="wrapper">
<Show when={data()?.book}>
<div>{data().book.title}</div>
<div>{data().book.year}</div>
<div>{data().book.synopsis}</div>
<For each={data().book.genre}>{genres}</For>
<Show when={data().book.creatorNames.length > 0}>
<For each={data().book.creatorNames}>
{(name, index) => (
<A href={`/creators/${data().book.creatorIds[index()]}`}>{name}</A>
)}
</For>
</Show>
</Show>
</div>
)
}