{book && `Edit Book ${book["@id"]}`}

import { GetStaticPaths, GetStaticProps, NextComponentType, NextPageContext, } from "next"; import DefaultErrorPage from "next/error"; import Head from "next/head"; import { useRouter } from "next/router"; import { dehydrate, QueryClient, useQuery } from "react-query"; import { Form } from "../../../components/book/Form"; import { PagedCollection } from "../../../types/collection"; import { Book } from "../../../types/Book"; import { fetch, FetchResponse, getItemPaths } from "../../../utils/dataAccess"; const getBook = async (id: string | string[] | undefined) => id ? await fetch(`/books/${id}`) : Promise.resolve(undefined); const Page: NextComponentType = () => { const router = useRouter(); const { id } = router.query; const { data: { data: book } = {} } = useQuery< FetchResponse | undefined >(["book", id], () => getBook(id)); if (!book) { return ; } return (

); }; export const getStaticProps: GetStaticProps = async ({ params: { id } = {}, }) => { if (!id) throw new Error("id not in query param"); const queryClient = new QueryClient(); await queryClient.prefetchQuery(["book", id], () => getBook(id)); return { props: { dehydratedState: dehydrate(queryClient), }, revalidate: 1, }; }; export const getStaticPaths: GetStaticPaths = async () => { const response = await fetch>("/books"); const paths = await getItemPaths(response, "books", "/books/[id]/edit"); return { paths, fallback: true, }; }; export default Page;