{review && `Edit Review ${review["@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/review/Form"; import { PagedCollection } from "../../../types/collection"; import { Review } from "../../../types/Review"; import { fetch, FetchResponse, getItemPaths } from "../../../utils/dataAccess"; const getReview = async (id: string | string[] | undefined) => id ? await fetch(`/reviews/${id}`) : Promise.resolve(undefined); const Page: NextComponentType = () => { const router = useRouter(); const { id } = router.query; const { data: { data: review } = {} } = useQuery< FetchResponse | undefined >(["review", id], () => getReview(id)); if (!review) { 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(["review", id], () => getReview(id)); return { props: { dehydratedState: dehydrate(queryClient), }, revalidate: 1, }; }; export const getStaticPaths: GetStaticPaths = async () => { const response = await fetch>("/reviews"); const paths = await getItemPaths(response, "reviews", "/reviews/[id]/edit"); return { paths, fallback: true, }; }; export default Page;