SSR for item trades page

I'm just moving through and using the new page title syntax, and getting some SSR in while I'm at it uwu

pages/items/[itemId]/trades/offering.tsx

@@ -1,5 +1,54 @@
+import { GetServerSideProps } from "next";
 import { ItemTradesOfferingPage } from "../../../../src/app/ItemTradesPage";
+import { gql, loadGraphqlQuery } from "../../../../src/server/ssr-graphql";
+// @ts-ignore doesn't understand module.exports
+import { oneDay, oneWeek } from "../../../../src/server/util";
 
 export default function ItemTradesOfferingPageWrapper() {
   return <ItemTradesOfferingPage />;
 }
+
+export const getServerSideProps: GetServerSideProps = async ({
+  params,
+  res,
+}) => {
+  if (params?.itemId == null) {
+    throw new Error(`assertion error: itemId param is missing`);
+  }
+
+  // Load the most important, most stable item data to get onto the page ASAP.
+  // We'll cache it real hard, to help it load extra-fast for popular items!
+  const { errors, graphqlState } = await loadGraphqlQuery({
+    query: gql`
+      query ItemsTradesOffering_GetServerSideProps($itemId: ID!) {
+        item(id: $itemId) {
+          id
+          name
+          thumbnailUrl
+          description
+          isNc
+          isPb
+          createdAt
+        }
+      }
+    `,
+    variables: { itemId: params.itemId },
+  });
+  if (errors) {
+    console.warn(
+      `[SSR: /items/[itemId]/trades/offering] Skipping GraphQL preloading, got errors:`
+    );
+    for (const error of errors) {
+      console.warn(`[SSR: /items/[itemId]/trades/offering]`, error);
+    }
+    return { props: { graphqlState: {} } };
+  }
+
+  // Cache this very aggressively, because it's such stable data!
+  res.setHeader(
+    "Cache-Control",
+    `public, s-maxage=${oneDay}, stale-while-revalidate=${oneWeek}`
+  );
+
+  return { props: { graphqlState } };
+};

pages/items/[itemId]/trades/seeking.tsx

@@ -1,5 +1,54 @@
+import { GetServerSideProps } from "next";
 import { ItemTradesSeekingPage } from "../../../../src/app/ItemTradesPage";
+import { gql, loadGraphqlQuery } from "../../../../src/server/ssr-graphql";
+// @ts-ignore doesn't understand module.exports
+import { oneDay, oneWeek } from "../../../../src/server/util";
 
 export default function ItemTradesSeekingPageWrapper() {
   return <ItemTradesSeekingPage />;
 }
+
+export const getServerSideProps: GetServerSideProps = async ({
+  params,
+  res,
+}) => {
+  if (params?.itemId == null) {
+    throw new Error(`assertion error: itemId param is missing`);
+  }
+
+  // Load the most important, most stable item data to get onto the page ASAP.
+  // We'll cache it real hard, to help it load extra-fast for popular items!
+  const { errors, graphqlState } = await loadGraphqlQuery({
+    query: gql`
+      query ItemsTradesSeeking_GetServerSideProps($itemId: ID!) {
+        item(id: $itemId) {
+          id
+          name
+          thumbnailUrl
+          description
+          isNc
+          isPb
+          createdAt
+        }
+      }
+    `,
+    variables: { itemId: params.itemId },
+  });
+  if (errors) {
+    console.warn(
+      `[SSR: /items/[itemId]/trades/seeking] Skipping GraphQL preloading, got errors:`
+    );
+    for (const error of errors) {
+      console.warn(`[SSR: /items/[itemId]/trades/seeking]`, error);
+    }
+    return { props: { graphqlState: {} } };
+  }
+
+  // Cache this very aggressively, because it's such stable data!
+  res.setHeader(
+    "Cache-Control",
+    `public, s-maxage=${oneDay}, stale-while-revalidate=${oneWeek}`
+  );
+
+  return { props: { graphqlState } };
+};

src/app/ItemTradesPage.js

@@ -13,10 +13,11 @@ import { useQuery } from "@apollo/client";
 import Link from "next/link";
 import { useRouter } from "next/router";
 
-import { Heading2, usePageTitle } from "./util";
+import { Heading2 } from "./util";
 import ItemPageLayout from "./ItemPageLayout";
 import useCurrentUser from "./components/useCurrentUser";
 import { ChevronDownIcon, ChevronUpIcon } from "@chakra-ui/icons";
+import Head from "next/head";
 
 export function ItemTradesOfferingPage() {
   return (
@@ -111,24 +112,31 @@ function ItemTradesPage({
     { variables: { itemId }, returnPartialData: true }
   );
 
-  usePageTitle(`${data?.item?.name} | ${title}`, { skip: !data?.item?.name });
-
   if (error) {
     return <Box color="red.400">{error.message}</Box>;
   }
 
   return (
-    <ItemPageLayout item={data?.item}>
-      <Heading2 marginTop="6" marginBottom="4">
-        {title}
-      </Heading2>
-      <ItemTradesTable
-        itemId={itemId}
-        userHeading={userHeading}
-        compareColumnLabel={compareColumnLabel}
-        tradesQuery={tradesQuery}
-      />
-    </ItemPageLayout>
+    <>
+      <Head>
+        {data?.item?.name && (
+          <title>
+            {data?.item?.name} | {title} | Dress to Impress
+          </title>
+        )}
+      </Head>
+      <ItemPageLayout item={data?.item}>
+        <Heading2 marginTop="6" marginBottom="4">
+          {title}
+        </Heading2>
+        <ItemTradesTable
+          itemId={itemId}
+          userHeading={userHeading}
+          compareColumnLabel={compareColumnLabel}
+          tradesQuery={tradesQuery}
+        />
+      </ItemPageLayout>
+    </>
   );
 }