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!
65 lines
2 KiB
TypeScript
65 lines
2 KiB
TypeScript
import { GetServerSideProps } from "next";
|
|
import WardrobePage from "../../src/app/WardrobePage";
|
|
import { readOutfitStateFromQuery } from "../../src/app/WardrobePage/useOutfitState";
|
|
import type { NextPageWithLayout } from "../_app";
|
|
import { loadGraphqlQuery, gql } from "../../src/server/ssr-graphql";
|
|
import {
|
|
itemAppearanceFragment,
|
|
petAppearanceFragment,
|
|
} from "../../src/app/components/useOutfitAppearance";
|
|
|
|
const WardrobePageWrapper: NextPageWithLayout = () => {
|
|
return <WardrobePage />;
|
|
};
|
|
|
|
WardrobePageWrapper.renderWithLayout = (children) => children;
|
|
|
|
export const getServerSideProps: GetServerSideProps = async ({ query }) => {
|
|
// Read the outfit info necessary to start rendering the image ASAP, and SSR
|
|
// with it! We add it as a special `pageProps` key named `graphqlState`,
|
|
// which the `App` component intercepts and gives to the Apollo client.
|
|
const outfitState = readOutfitStateFromQuery(query);
|
|
const res = await loadGraphqlQuery({
|
|
query: gql`
|
|
query OutfitsNew_GetServerSideProps(
|
|
$speciesId: ID!
|
|
$colorId: ID!
|
|
$pose: Pose!
|
|
$wornItemIds: [ID!]!
|
|
) {
|
|
petAppearance(speciesId: $speciesId, colorId: $colorId, pose: $pose) {
|
|
id
|
|
...PetAppearanceForOutfitPreview
|
|
}
|
|
items(ids: $wornItemIds) {
|
|
id
|
|
name
|
|
appearanceOn(speciesId: $speciesId, colorId: $colorId) {
|
|
...ItemAppearanceForOutfitPreview
|
|
}
|
|
}
|
|
}
|
|
${petAppearanceFragment}
|
|
${itemAppearanceFragment}
|
|
`,
|
|
variables: {
|
|
speciesId: outfitState.speciesId,
|
|
colorId: outfitState.colorId,
|
|
pose: outfitState.pose,
|
|
wornItemIds: outfitState.wornItemIds,
|
|
},
|
|
});
|
|
if (res.errors) {
|
|
console.warn(
|
|
`[SSR: /outfits/new] Skipping GraphQL preloading, got errors:`
|
|
);
|
|
for (const error of res.errors) {
|
|
console.warn(`[SSR: /outfits/new]`, error);
|
|
}
|
|
return { props: { graphqlState: {} } };
|
|
}
|
|
|
|
return { props: { graphqlState: res.state } };
|
|
};
|
|
|
|
export default WardrobePageWrapper;
|