Merge pull request #8 from database-playground/pan93412/dbp-63-enable-apq-on-frontend

feat(apollo): enable APQ

Author: pan93412

app/(app)/challenges/_components/header/index.tsx

@@ -24,6 +24,8 @@ export default function Header() {
   const totalSolvedQuestions = data.me.submissionStatistics.solvedQuestions;
   const totalAttemptedQuestions = data.me.submissionStatistics.attemptedQuestions;
 
+  const completedPercentage = totalQuestions > 0 ? (totalSolvedQuestions / totalQuestions) * 100 : 0;
+
   return (
     <header className="flex items-center justify-between pb-6">
       <div className="space-y-1 tracking-wide">
@@ -51,7 +53,7 @@ export default function Header() {
           variant="primary"
           cols={10}
           rows={4}
-          progress={(totalSolvedQuestions / totalQuestions) * 100}
+          progress={completedPercentage}
         />
       </div>
     </header>

app/(app)/statistics/_components/board/completed-questions.tsx

@@ -28,11 +28,11 @@ export default function CompletedQuestionsPercentage() {
 
   const totalQuestions = data.me.submissionStatistics.totalQuestions;
   const solvedQuestions = data.me.submissionStatistics.solvedQuestions;
-  const completedPercentage = (solvedQuestions / totalQuestions) * 100;
+  const completedPercentage = totalQuestions > 0 ? (solvedQuestions / totalQuestions) * 100 : 0;
 
   return (
     <>
-      {solvedQuestions}/{totalQuestions} ({completedPercentage.toFixed(2)}%)
+      {solvedQuestions}/{totalQuestions} ({completedPercentage.toFixed(0)}%)
     </>
   );
 }

app/(app)/statistics/_components/statistics/resolved-questions.tsx

@@ -20,12 +20,12 @@ export default function ResolvedQuestions() {
   const { data } = useSuspenseQuery(RESOLVED_QUESTIONS);
   const totalQuestions = data.me.submissionStatistics.totalQuestions;
   const solvedQuestions = data.me.submissionStatistics.solvedQuestions;
-  const resolvedQuestions = solvedQuestions / totalQuestions;
+  const resolvedQuestions = totalQuestions > 0 ? (solvedQuestions / totalQuestions) * 100 : 0;
 
   return (
     <div className="flex flex-col gap-1">
       你攻克了 {resolvedQuestions.toFixed(0)}% 的題目！
-      <Progress className="max-w-[50%]" value={resolvedQuestions * 100} />
+      <Progress className="max-w-[50%]" value={resolvedQuestions} />
     </div>
   );
 }

lib/apollo.ts

@@ -1,5 +1,7 @@
 import { HttpLink } from "@apollo/client";
 import { ApolloClient, InMemoryCache } from "@apollo/client-integration-nextjs";
+import { PersistedQueryLink } from "@apollo/client/link/persisted-queries";
+import { sha256 } from "crypto-hash";
 import buildUri from "./build-uri";
 
 /**
@@ -8,6 +10,7 @@ import buildUri from "./build-uri";
  * You should add the token to the headers of the request.
  */
 export function makeClient({ token }: { token?: string | null }) {
+  const persistedQueryLink = new PersistedQueryLink({ sha256 });
   const httpLink = new HttpLink({
     uri: buildUri("/query"),
     headers: {
@@ -17,6 +20,6 @@ export function makeClient({ token }: { token?: string | null }) {
 
   return new ApolloClient({
     cache: new InMemoryCache(),
-    link: httpLink,
+    link: persistedQueryLink.concat(httpLink),
   });
 }

package.json

@@ -42,6 +42,7 @@
     "babel-plugin-react-compiler": "19.1.0-rc.3",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
+    "crypto-hash": "^4.0.0",
     "foxact": "^0.2.49",
     "graphql": "^16.11.0",
     "lucide-react": "^0.544.0",