suggestions plusStatuses via trpc

app/plus/api.ts

@@ -1,40 +1,16 @@
 import { createRouter } from "pages/api/trpc/[trpc]";
-import * as z from "zod";
+import service from "./service";
 
-// The app's context - is generated for each incoming request
-// export type Context = {};
-// const createContext = ({
-//   req,
-//   res,
-// }: trpcNext.CreateNextContextOptions): Context => {
-//   return {};
-// };
-
-// function createRouter() {
-//   return trpc.router<Context>();
-// }
-// Important: only use this export with SSR/SSG
-const plusApi = createRouter().query("voting-history", {
-  input: z
-    .object({
-      text: z.string().optional(),
-    })
-    .optional(),
-  resolve({ input }) {
-    // the `input` here is parsed by the parser passed in `input` the type inferred
-    return {
-      greeting: `hello ${input?.text ?? "world"}`,
-    };
-  },
-});
-
-// Exporting type _type_ AppRouter only exposes types that can be used for inference
-// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
-// export type AppRouter = typeof appRouter;
-
-// export default trpcNext.createNextApiHandler({
-//   router: appRouter,
-//   createContext,
-// });
+const plusApi = createRouter()
+  .query("Suggestions", {
+    resolve() {
+      return service.getSuggestions();
+    },
+  })
+  .query("Statuses", {
+    resolve() {
+      return service.getPlusStatuses();
+    },
+  });
 
 export default plusApi;

app/plus/components/PlusHomePage.tsx

@@ -8,7 +8,6 @@ import {
 } from "@chakra-ui/react";
 import { Trans } from "@lingui/macro";
 import { usePlusHomePage } from "app/plus/hooks/usePlusHomePage";
-import { PlusStatuses, Suggestions } from "app/plus/service";
 import MyHead from "components/common/MyHead";
 import SubText from "components/common/SubText";
 import { useUser } from "hooks/common";
@@ -19,12 +18,7 @@ import SuggestionModal from "./SuggestionModal";
 import VotingInfoHeader from "./VotingInfoHeader";
 import VouchModal from "./VouchModal";
 
-export interface PlusHomePageProps {
-  suggestions: Suggestions;
-  statuses: PlusStatuses;
-}
-
-const PlusHomePage = ({ suggestions, statuses }: PlusHomePageProps) => {
+const PlusHomePage = () => {
   const [user] = useUser();
   const {
     plusStatusData,
@@ -33,7 +27,7 @@ const PlusHomePage = ({ suggestions, statuses }: PlusHomePageProps) => {
     suggestionCounts,
     setSuggestionsFilter,
     vouchedPlusStatusData,
-  } = usePlusHomePage({ suggestions, statuses });
+  } = usePlusHomePage();
 
   return (
     <>
@@ -73,9 +67,7 @@ const PlusHomePage = ({ suggestions, statuses }: PlusHomePageProps) => {
               {plusStatusData?.canVouchAgainAfter && (
                 <Box>
                   Can vouch again after:{" "}
-                  {new Date(
-                    plusStatusData.canVouchAgainAfter
-                  ).toLocaleDateString()}
+                  {plusStatusData.canVouchAgainAfter.toLocaleDateString()}
                 </Box>
               )}
               {plusStatusData?.voucher && (

app/plus/hooks/usePlusHomePage.ts

@@ -1,28 +1,15 @@
-import { PlusStatuses, Suggestions } from "app/plus/service";
 import { useState } from "react";
-import useSWR from "swr";
+import { trpc } from "utils/trpc";
 import { useUser } from "../../../hooks/common";
 
-export function usePlusHomePage({
-  suggestions: suggestionsInitial,
-  statuses: statusesInitial,
-}: {
-  suggestions: Suggestions;
-  statuses: PlusStatuses;
-}) {
+export function usePlusHomePage() {
   const [user] = useUser();
   const [suggestionsFilter, setSuggestionsFilter] = useState<
     number | undefined
   >(undefined);
 
-  const { data: plusStatusData } = useSWR<PlusStatuses>(
-    user ? "/api/plus" : null,
-    { initialData: statusesInitial }
-  );
-  const { data: suggestionsData } = useSWR<Suggestions>(
-    "/api/plus/suggestions",
-    { initialData: suggestionsInitial }
-  );
+  const { data: suggestionsData } = trpc.useQuery(["plusSuggestions"]);
+  const { data: plusStatusData } = trpc.useQuery(["plusStatuses"]);
 
   const suggestions = suggestionsData ?? [];
 

package-lock.json

@@ -6617,6 +6617,14 @@
       "resolved": "https://registry.npmjs.org/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz",
       "integrity": "sha512-nTbZoaqoBnmK+ptANthb10ZRZOGC+EmTLLUxeYIuHNkEKcmKgXX1XWKkUBT2Ac4es3NybooPe0SmvKdhKJZAuw=="
     },
+    "superjson": {
+      "version": "1.7.2",
+      "resolved": "https://registry.npmjs.org/superjson/-/superjson-1.7.2.tgz",
+      "integrity": "sha512-KwMBfX2c5Mq4EcvGivXH3JBYqYFoZQbA3aMhwXIdpkyVInEkxIGaoSDk+E8y/gMe5RH3mjBU3xRpvKsjZktphw==",
+      "requires": {
+        "debug": "^4.3.1"
+      }
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",

package.json

@@ -53,6 +53,7 @@
     "react-select": "^4.2.1",
     "react-string-replace": "^0.4.4",
     "recharts": "^2.0.8",
+    "superjson": "^1.7.2",
     "swr": "^0.4.2",
     "ts-trueskill": "^3.2.0",
     "uuid": "^8.3.2",

pages/api/trpc/[trpc].ts

@@ -1,6 +1,7 @@
 import * as trpc from "@trpc/server";
 import * as trpcNext from "@trpc/server/dist/adapters/next";
-import * as z from "zod";
+import plusApi from "app/plus/api";
+import superjson from "superjson";
 
 // The app's context - is generated for each incoming request
 export type Context = {};
@@ -15,22 +16,7 @@ export function createRouter() {
   return trpc.router<Context>();
 }
 // Important: only use this export with SSR/SSG
-export const appRouter = createRouter()
-  // Create procedure at path 'hello'
-  .query("hello", {
-    // using zod schema to validate and infer input values
-    input: z
-      .object({
-        text: z.string().optional(),
-      })
-      .optional(),
-    resolve({ input }) {
-      // the `input` here is parsed by the parser passed in `input` the type inferred
-      return {
-        greeting: `hello ${input?.text ?? "world"}`,
-      };
-    },
-  });
+export const appRouter = createRouter().merge("plus", plusApi);
 
 // Exporting type _type_ AppRouter only exposes types that can be used for inference
 // https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
@@ -40,4 +26,5 @@ export type AppRouter = typeof appRouter;
 export default trpcNext.createNextApiHandler({
   router: appRouter,
   createContext,
+  transformer: superjson,
 });

pages/plus/index.tsx

@@ -1,20 +1,19 @@
-import PlusHomePage, {
-  PlusHomePageProps,
-} from "app/plus/components/PlusHomePage";
-import plusService from "app/plus/service";
+import PlusHomePage from "app/plus/components/PlusHomePage";
 import HeaderBanner from "components/layout/HeaderBanner";
-import { GetStaticProps } from "next";
+import { appRouter } from "pages/api/trpc/[trpc]";
+import { trpc } from "utils/trpc";
 
-export const getStaticProps: GetStaticProps<PlusHomePageProps> = async () => {
-  const [suggestions, statuses] = await Promise.all([
-    plusService.getSuggestions(),
-    plusService.getPlusStatuses(),
+export const getStaticProps = async () => {
+  const ssr = trpc.ssr(appRouter, {});
+
+  await Promise.all([
+    ssr.prefetchQuery("plusSuggestions"),
+    ssr.prefetchQuery("plusStatuses"),
   ]);
 
   return {
     props: {
-      suggestions: JSON.parse(JSON.stringify(suggestions)),
-      statuses: JSON.parse(JSON.stringify(statuses)),
+      dehydratedState: trpc.dehydrate(),
     },
     revalidate: 60,
   };

utils/trpc.ts

@@ -1,11 +1,11 @@
 import { createReactQueryHooks, createTRPCClient } from "@trpc/react";
 import { QueryClient } from "react-query";
-// Type-only import:
-// https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export
+import superjson from "superjson";
 import type { AppRouter } from "../pages/api/trpc/[trpc]";
 
 export const client = createTRPCClient<AppRouter>({
   url: "/api/trpc",
+  transformer: superjson,
 });
 
 export const trpc = createReactQueryHooks({