create-client/templates/next/pages/foos/[id]/index.tsx at 52073275ba130cf7ce95056771316e826c25cdac · api-platform/create-client · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
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 "@tanstack/react-query";

import { Show } from "../../../components/{{{lc}}}/Show";
import { PagedCollection } from "../../../types/collection";
import { {{{ucf}}} } from "../../../types/{{{ucf}}}";
import { fetchApi, FetchResponse, getItemPaths } from "../../../utils/dataAccess";
import { useMercure } from "../../../utils/mercure";

const get{{{ucf}}} = async (id: string|string[]|undefined) => id ? await fetchApi<{{{ucf}}}>(`/{{{name}}}/${id}`) : Promise.resolve(undefined);

const Page: NextComponentType<NextPageContext> = () => {
  const router = useRouter();
  const { id } = router.query;

  const { data: { data: {{lc}}, hubURL, text } = { hubURL: null, text: '' } } =
    useQuery<FetchResponse<{{{ucf}}}> | undefined, Error, FetchResponse<{{{ucf}}}> | undefined>({queryKey: ['{{{lc}}}', id], queryFn: () => get{{{ucf}}}(id)});
  const {{{lc}}}Data = useMercure({{lc}}, hubURL);

  if (!{{{lc}}}Data) {
    return <DefaultErrorPage statusCode={404} />;
  }

  return (
    <div>
      <div>
        <Head>
          <title>{`Show {{{ucf}}} ${ {{~lc}}Data['@id'] }`}</title>
        </Head>
      </div>
      <Show {{{lc}}}={ {{{lc}}}Data } text={text} />
    </div>
  );
};

export const getStaticProps: GetStaticProps = async ({ params: { id } = {} }) => {
  if (!id) throw new Error('id not in query param');
  const queryClient = new QueryClient();
  await queryClient.prefetchQuery({queryKey: ["{{{lc}}}", id], queryFn: () => get{{{ucf}}}(id)});

  return {
    props: {
      dehydratedState: dehydrate(queryClient),
    },
    revalidate: 1,
  };
};

export const getStaticPaths: GetStaticPaths = async () => {
  const response = await fetchApi<PagedCollection<{{{ucf}}}>>("/{{{name}}}");
  const paths = await getItemPaths(response, "{{{name}}}", '/{{{lc}}}s/[id]');

  return {
    paths,
    fallback: true,
  };
}

export default Page;