55 lines
1.6 KiB
TypeScript
55 lines
1.6 KiB
TypeScript
import { FC } from "react";
|
||
import styles from "./article.module.css";
|
||
import { GetServerSideProps } from "next";
|
||
import { addApolloState, initializeApollo } from "../../commons/graphql/client";
|
||
import { ARTICLE } from "../../commons/graphql/queries";
|
||
import { Article } from "../../commons/graphql/generated";
|
||
import { formatRelative } from "date-fns";
|
||
import { zhCN } from "date-fns/locale";
|
||
interface Props {
|
||
article: Article;
|
||
}
|
||
const ArticleDetails: FC<Props> = ({ article }) => {
|
||
// const router = useRouter()
|
||
// const { data } = useQuery<{ article: Article }>(ARTICLE, {
|
||
// variables: router.query,
|
||
// });
|
||
|
||
return (
|
||
<main className={styles.articleDetails}>
|
||
<article className={styles.article}>
|
||
<header>
|
||
<h1>{article.title}</h1>
|
||
<div className={styles.headerInfo}>
|
||
<address>作者 Ivan Li，发布于 </address>
|
||
<time>
|
||
{formatRelative(article.publishedAt, new Date(), {
|
||
locale: zhCN,
|
||
})}
|
||
</time>
|
||
</div>
|
||
</header>
|
||
<div dangerouslySetInnerHTML={{ __html: article.html }}></div>
|
||
<footer>
|
||
<div className={styles.articleEnd}>The End</div>
|
||
</footer>
|
||
</article>
|
||
</main>
|
||
);
|
||
};
|
||
|
||
export const getServerSideProps: GetServerSideProps = async ({ params }) => {
|
||
const apolloClient = initializeApollo();
|
||
|
||
const { data } = await apolloClient.query<{ article: Article }>({
|
||
query: ARTICLE,
|
||
variables: params,
|
||
});
|
||
|
||
return addApolloState(apolloClient, {
|
||
props: { article: data.article },
|
||
});
|
||
};
|
||
|
||
export default ArticleDetails;
|