👁️
preload socials
+34
-5
+11
src/lib/constellation-queries.ts
+11
src/lib/constellation-queries.ts
···
136
136
saveCount: ["constellation", "saveCount", itemUri] as const,
137
137
};
138
138
}
139
+
140
+
/**
141
+
* Preload social stats for SSR
142
+
* Only prefetches count (no auth needed), user saved query runs client-side
143
+
*/
144
+
export function socialStatsPreload<T extends SocialItemType>(
145
+
itemUri: T extends "card" ? CardItemUri : DeckItemUri,
146
+
itemType: T,
147
+
) {
148
+
return [itemSaveCountQueryOptions(itemUri, itemType)];
149
+
}
+23
-5
src/routes/card/$id.tsx
+23
-5
src/routes/card/$id.tsx
···
6
6
import { OracleText } from "@/components/OracleText";
7
7
import { SocialStats } from "@/components/social/SocialStats";
8
8
import { getAllFaces } from "@/lib/card-faces";
9
+
import { socialStatsPreload } from "@/lib/constellation-queries";
9
10
import { FORMAT_GROUPS } from "@/lib/format-utils";
10
11
import {
11
12
getCardByIdQueryOptions,
···
18
19
OracleId,
19
20
ScryfallId,
20
21
} from "@/lib/scryfall-types";
21
-
import { asOracleId, isScryfallId } from "@/lib/scryfall-types";
22
+
import { asOracleId, isScryfallId, toOracleUri } from "@/lib/scryfall-types";
22
23
import { getImageUri } from "@/lib/scryfall-utils";
23
24
24
25
const NOT_FOUND_META = {
···
39
40
// Prefetch card and volatile data in parallel
40
41
// Printing IDs and printing cards are loaded client-side to avoid memory bloat
41
42
// (some cards like Lightning Bolt have 100+ printings)
43
+
const cardPromise = context.queryClient.ensureQueryData(
44
+
getCardByIdQueryOptions(params.id),
45
+
);
46
+
const volatilePromise = context.queryClient.ensureQueryData(
47
+
getVolatileDataQueryOptions(params.id),
48
+
);
49
+
50
+
// Chain social stats off card (needs oracle_id), runs parallel with volatile
51
+
const socialPromise = cardPromise.then((card) => {
52
+
if (!card?.oracle_id) return;
53
+
const oracleUri = toOracleUri(asOracleId(card.oracle_id));
54
+
return Promise.all(
55
+
socialStatsPreload(oracleUri, "card").map((opts) =>
56
+
context.queryClient.ensureQueryData(opts),
57
+
),
58
+
);
59
+
});
60
+
42
61
const [card] = await Promise.all([
43
-
context.queryClient.ensureQueryData(getCardByIdQueryOptions(params.id)),
44
-
context.queryClient.ensureQueryData(
45
-
getVolatileDataQueryOptions(params.id),
46
-
),
62
+
cardPromise,
63
+
volatilePromise,
64
+
socialPromise,
47
65
]);
48
66
return card ?? null;
49
67
},