Matchu
2887d952de
Whew, setting up a cute GraphQL SSR system! I feel like it strikes a good balance of not having actually too many moving parts, though it's still a bit extensive for the problem we're solving 😅
Anyway, by doing SSR at _all_, we solve the problem where Next's "Automatic Static Optimization" was causing problems by setting the outfit state to the default at the start of the page load.
So I figured, why not try to SSR things _good_?
Now, when you navigate to the /outfits/new page, Next.js will go get the necessary GraphQL data to show the image before even putting the page into view. This makes the image show up all snappy-like! (when images.neopets.com is behaving :p)
We could do this with the stuff in the items panel too, but it's a tiny bit more annoying in the code right now, so I'm just gonna not worry about it and see how this performs in practice!
This change _doesn't_ include making the images actually show up before JS loads in, I assume because our JS code tries to validate that the images have loaded before fading them in on the page. Idk if we want to do something smarter there for the SSR case, to try to get them loading in faster!
146 lines
4.9 KiB
TypeScript
146 lines
4.9 KiB
TypeScript
import React from "react";
|
|
import Head from "next/head";
|
|
import type { AppProps } from "next/app";
|
|
import type { NextPage } from "next";
|
|
import * as Sentry from "@sentry/react";
|
|
import { Integrations } from "@sentry/tracing";
|
|
import { Auth0Provider } from "@auth0/auth0-react";
|
|
import { CSSReset, ChakraProvider, extendTheme } from "@chakra-ui/react";
|
|
import { ApolloProvider, NormalizedCacheObject } from "@apollo/client";
|
|
import { useAuth0 } from "@auth0/auth0-react";
|
|
import { mode } from "@chakra-ui/theme-tools";
|
|
|
|
import buildApolloClient from "../src/app/apolloClient";
|
|
import PageLayout from "../src/app/PageLayout";
|
|
|
|
export type NextPageWithLayout<P = {}, IP = P> = NextPage<P, IP> & {
|
|
renderWithLayout?: (children: JSX.Element) => JSX.Element;
|
|
};
|
|
|
|
const theme = extendTheme({
|
|
styles: {
|
|
global: (props) => ({
|
|
html: {
|
|
// HACK: Chakra sets body as the relative position element, which is
|
|
// fine, except its `min-height: 100%` doesn't actually work
|
|
// unless paired with height on the root element too!
|
|
height: "100%",
|
|
},
|
|
body: {
|
|
background: mode("gray.50", "gray.800")(props),
|
|
color: mode("green.800", "green.50")(props),
|
|
transition: "all 0.25s",
|
|
},
|
|
}),
|
|
},
|
|
});
|
|
|
|
type AppPropsWithLayout = AppProps & { Component: NextPageWithLayout };
|
|
|
|
export default function DTIApp({ Component, pageProps }: AppPropsWithLayout) {
|
|
const renderWithLayout =
|
|
Component.renderWithLayout ?? renderWithDefaultLayout;
|
|
|
|
React.useEffect(() => setupLogging(), []);
|
|
|
|
return (
|
|
<>
|
|
<Head>
|
|
<title>Dress to Impress</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
</Head>
|
|
|
|
<Auth0Provider
|
|
domain="openneo.us.auth0.com"
|
|
clientId="8LjFauVox7shDxVufQqnviUIywMuuC4r"
|
|
redirectUri={
|
|
process.env.NODE_ENV === "development"
|
|
? "http://localhost:3000"
|
|
: "https://impress-2020.openneo.net"
|
|
}
|
|
audience="https://impress-2020.openneo.net/api"
|
|
scope=""
|
|
>
|
|
<ApolloProviderWithAuth0
|
|
initialCacheState={pageProps.graphqlState ?? {}}
|
|
>
|
|
<ChakraProvider theme={theme}>
|
|
<CSSReset />
|
|
{renderWithLayout(<Component {...pageProps} />)}
|
|
</ChakraProvider>
|
|
</ApolloProviderWithAuth0>
|
|
</Auth0Provider>
|
|
</>
|
|
);
|
|
}
|
|
|
|
function renderWithDefaultLayout(children: JSX.Element) {
|
|
return <PageLayout>{children}</PageLayout>;
|
|
}
|
|
|
|
function ApolloProviderWithAuth0({
|
|
children,
|
|
initialCacheState = {},
|
|
}: {
|
|
children: React.ReactNode;
|
|
initialCacheState: NormalizedCacheObject;
|
|
}) {
|
|
const auth0 = useAuth0();
|
|
const auth0Ref = React.useRef(auth0);
|
|
|
|
React.useEffect(() => {
|
|
auth0Ref.current = auth0;
|
|
}, [auth0]);
|
|
|
|
const client = React.useMemo(
|
|
() =>
|
|
buildApolloClient({
|
|
getAuth0: () => auth0Ref.current,
|
|
initialCacheState,
|
|
}),
|
|
[initialCacheState]
|
|
);
|
|
return <ApolloProvider client={client}>{children}</ApolloProvider>;
|
|
}
|
|
|
|
function setupLogging() {
|
|
Sentry.init({
|
|
dsn:
|
|
"https://c55875c3b0904264a1a99e5b741a221e@o506079.ingest.sentry.io/5595379",
|
|
autoSessionTracking: true,
|
|
integrations: [
|
|
new Integrations.BrowserTracing({
|
|
beforeNavigate: (context) => ({
|
|
...context,
|
|
// Assume any path segment starting with a digit is an ID, and replace
|
|
// it with `:id`. This will help group related routes in Sentry stats.
|
|
// NOTE: I'm a bit uncertain about the timing on this for tracking
|
|
// client-side navs... but we now only track first-time
|
|
// pageloads, and it definitely works correctly for them!
|
|
name: window.location.pathname.replaceAll(/\/[0-9][^/]*/g, "/:id"),
|
|
}),
|
|
|
|
// We have a _lot_ of location changes that don't actually signify useful
|
|
// navigations, like in the wardrobe page. It could be useful to trace
|
|
// them with better filtering someday, but frankly we don't use the perf
|
|
// features besides Web Vitals right now, and those only get tracked on
|
|
// first-time pageloads, anyway. So, don't track client-side navs!
|
|
startTransactionOnLocationChange: false,
|
|
}),
|
|
],
|
|
denyUrls: [
|
|
// Don't log errors that were probably triggered by extensions and not by
|
|
// our own app. (Apparently Sentry's setting to ignore browser extension
|
|
// errors doesn't do this anywhere near as consistently as I'd expect?)
|
|
//
|
|
// Adapted from https://gist.github.com/impressiver/5092952, as linked in
|
|
// https://docs.sentry.io/platforms/javascript/configuration/filtering/.
|
|
/^chrome-extension:\/\//,
|
|
/^moz-extension:\/\//,
|
|
],
|
|
|
|
// Since we're only tracking first-page loads and not navigations, 100%
|
|
// sampling isn't actually so much! Tune down if it becomes a problem, tho.
|
|
tracesSampleRate: 1.0,
|
|
});
|
|
}
|