blog-fs/pages/articles/[id].tsx

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;