45 lines
1.3 KiB
TypeScript
45 lines
1.3 KiB
TypeScript
import { FC } from "react";
|
|
import styles from "./article.module.css";
|
|
import { GetServerSideProps, GetStaticProps } from "next";
|
|
import { addApolloState, initializeApollo } from "../../commons/graphql/client";
|
|
import { ARTICLE } from "../../commons/graphql/queries";
|
|
import { Article } from "../../commons/graphql/generated";
|
|
import { useQuery } from '@apollo/client';
|
|
import { useRouter } from 'next/router';
|
|
|
|
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.content}}></div>
|
|
</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;
|