import { createGraphQLClient, gql } from "@solid-primitives/graphql";
import { createSignal, Show, For } from 'solid-js';
import { A } from '@solidjs/router';
interface BookEdge{
cursor: string;
node: {
id: string;
title: string;
year: number;
}
}
interface BooksSnippet {
books: {
edges: BookEdge[]
pageInfo: {
hasNextPage: boolean;
endCursor: boolean;
}
}
}
export default function Books() {
const newQuery = createGraphQLClient("http://localhost:8080/query");
const [search, setSearch] = createSignal('');
const [after, setAfter] = createSignal('0');
const [query, setQuery] = createSignal({
first: 10,
after: after(),
})
const [data] = newQuery<BooksSnippet>(
gql`
query books($first: Int, $after: ID!) {
books(first: $first, after: $after) {
edges {
cursor
node {
id
title
year
}
}
pageInfo {
hasNextPage
endCursor
}
}
}
`,
query,
);
return (
<div class="wrapper">
<form>
<input
placeholder="search"
value={search()}
onInput={(e) => {
setSearch(e.target.value);
setAfter('0');
}}
/>
</form>
<div>
<ul>
<Show when={data()?.books.edges}>
<For each={data().books.edges}>{(book) => (
<li>
<div>{book.node.title}</div>
<A href={`/books/${book.cursor}`}>More</A>
</li>
)}
</For>
</Show>
</ul>
<p>after: {after()}</p>
<Show when={data()?.books.pageInfo.hasNextPage && data().books.edges.length > 0}>
<button onClick={() => {
const lastCursor: string = data().books.edges[data().books.edges.length-1].cursor
setAfter(lastCursor)
setQuery({first: 10, after: lastCursor})
}}>
load next
</button>
</Show>
</div>
</div>
)
}