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
This commit is contained in:
Emi Matchu 2022-09-15 03:30:14 -07:00
parent 544a158f66
commit 72211ae95a
3 changed files with 120 additions and 14 deletions

View file

@ -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 } };
};

View file

@ -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 } };
};

View file

@ -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>
</>
);
}