feat: 亮色暗色模式切换。

pages/_app.tsx

@@ -4,40 +4,32 @@ import React from "react";
 import { GlobalSidebar } from "../components/layouts/global-sidebar";
 import styles from "./_app.module.css";
 import { ApolloProvider } from "@apollo/client";
-import { client } from "../commons/graphql/client";
+import { useApollo } from "../commons/graphql/client";
+import { ThemeProvider, useTheme } from '../commons/theme';
+import { SwitchTheme } from '../components/switch-theme';
 
 function MyApp({ Component, pageProps }) {
+  const apolloClient = useApollo(pageProps);
   return (
-    <ApolloProvider client={client}>
-      <div className={styles.page}>
-        <GlobalSidebar className={styles.sidebar} />
-        <div className={styles.primary}>
-          <header className={styles.pageHeader}>
-            <h1>{"Ivan Li 的个人博客"}</h1>
-            <div className={styles.actions}>
-              <button onClick={() => switchTheme("light")}>亮色</button>
-              <button onClick={() => switchTheme("dark")}>暗色</button>
+    <ApolloProvider client={apolloClient}>
+      <ThemeProvider>
+        <div className={styles.page}>
+          <GlobalSidebar className={styles.sidebar} />
+          <div className={styles.primary}>
+            <header className={styles.pageHeader}>
+              <h1>{"Ivan Li 的个人博客"}</h1>
+              <div className={styles.actions}>
+                <SwitchTheme />
+              </div>
+            </header>
+            <div className={styles.wrapper}>
+              <Component {...pageProps} />
             </div>
-          </header>
-          <div className={styles.wrapper}>
-            <Component {...pageProps} />
           </div>
         </div>
-      </div>
+      </ThemeProvider>
     </ApolloProvider>
   );
 }
 
-function switchTheme(mode: "light" | "dark" | "auto") {
-  if (mode === "auto") {
-    mode = "light";
-  }
-
-  if (mode === "dark") {
-    document.documentElement.classList.add("dark");
-  } else {
-    document.documentElement.classList.remove("dark");
-  }
-}
-
 export default MyApp;

pages/articles/[id].tsx

@@ -0,0 +1,38 @@
+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}>
+      <h1>{article.title}</h1>
+    </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;

pages/index.tsx

@@ -1,23 +1,46 @@
-import { useQuery } from '@apollo/client';
-import { Article } from '../commons/graphql/generated';
-import { ARTICLE_FOR_HOME } from '../commons/graphql/queries';
-import styles from './index.module.css';
+import { useQuery } from "@apollo/client";
+import { GetServerSideProps } from 'next';
+import Link from "next/link";
+import React from "react";
+import { addApolloState, initializeApollo } from '../commons/graphql/client';
+import { Article } from "../commons/graphql/generated";
+import { ARTICLE_FOR_HOME } from "../commons/graphql/queries";
+import styles from "./index.module.css";
 
 export default function Index() {
-  const { data, loading } = useQuery<{articles: Article[]}>(ARTICLE_FOR_HOME);
+  const { data, loading } = useQuery<{ articles: Article[] }>(ARTICLE_FOR_HOME);
 
-  return <main className={styles.index}>
-    <ol>
-      {
-        data?.articles?.map(article => <Item article={article} key={article.id} />)
-      }
-    </ol>
-  </main>;
+  return (
+    <main className={styles.index}>
+      <ol>
+        {data?.articles?.map((article) => (
+          <Item article={article} key={article.id} />
+        ))}
+      </ol>
+    </main>
+  );
 }
 
-function Item({article}: {article: Article}) {
-  return <li className={styles.item}>
-    <h2 className={styles.title}>{article.title}</h2>
-    <p className={styles.description}>{article.content}</p>
-  </li>
-}
+function Item({ article }: { article: Article }) {
+  return (
+    <Link href={`/articles/${article.id}`}>
+      <li className={styles.item}>
+        <h2 className={styles.title}>{article.title}</h2>
+        <p className={styles.description}>{article.content}</p>
+      </li>
+    </Link>
+  );
+}
+
+
+export const getServerSideProps: GetServerSideProps = async ({ params }) => {
+  const apolloClient = initializeApollo();
+
+  await apolloClient.query({
+    query: ARTICLE_FOR_HOME,
+  });
+
+  return addApolloState(apolloClient, {
+    props: {},
+  });
+};