46 lines
1.3 KiB
TypeScript
46 lines
1.3 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";
|
|
|
|
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>
|
|
<time>{article.publishedAt}</time>
|
|
</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;
|