eknkc
commented
11 months ago Here's an experimental rehydration setup I have. I know this does not handle a lot of cases you guys need to do, just an experiment. This seems to perform well and provide minimal serialized data on ssr. Am I missing anything here?
Basically I have a before and after hook running each time useSuspenseQuery is executed. The after one serializes whatever gets written to the cache, only runs on server. Before one checks if this operation id has a serialized cache data in window, if there is, it restores that to the inmemory cache. I feel like this will fail miserably during streaming complex documents though.
const CacheSymbol = Symbol.for("UM_REHYDRATE");
declare global {
interface Window {
[CacheSymbol]?: { [key: string]: Cache.WriteOptions[] };
}
}
type RehydrationContext = {
cache: Cache.WriteOptions[];
projectId?: string;
injected: string[];
injecting: boolean;
};
let RehydrationCtx = createContext<RehydrationContext>(null!);
export function ApolloProvider({ children }: { children: ReactNode }) {
let context = useMemo(
() => ({
cache: [],
projectId,
injected: [],
injecting: false,
}),
[projectId]
);
const client = useMemo(() => {
let cache: InMemoryCache;
if (typeof window == "undefined") {
cache = new RehydratingCache(context);
} else {
cache = new InMemoryCache();
}
return new ApolloClient({
link: ...
cache: cache,
});
}, []);
const suspenseCache = useMemo(() => new SuspenseCache(), []);
return (
<Provider client={client} suspenseCache={suspenseCache}>
<RehydrationCtx.Provider value={context}>{children}</RehydrationCtx.Provider>
</Provider>
);
}
export function useBeforeRehydrationContext(id: string) {
const { cache } = useApolloClient();
if (typeof window !== "undefined") {
const store = window[CacheSymbol];
const item = store?.[id];
if (item) {
item.forEach((x) => cache.write(x));
delete store[id];
}
}
}
export function useAfterRehydrationContext(id: string) {
const rehydrationContext = useContext(RehydrationCtx);
const insertHtml = useContext(ServerInsertedHTMLContext);
if (typeof window !== "undefined") return;
if (insertHtml && rehydrationContext.cache.length) {
const cache = rehydrationContext.cache;
insertHtml(() => <RehydratingData context={rehydrationContext} cache={cache} id={id} key={id} />);
rehydrationContext.cache = [];
}
return rehydrationContext;
}
function RehydratingData({ cache, context, id }: { id: string; context: RehydrationContext; cache: RehydrationContext["cache"] }) {
if (context.injected.includes(id)) {
return null;
}
context.injected.push(id);
return (
<script
key={id}
dangerouslySetInnerHTML={{
__html: `((window[Symbol.for("UM_REHYDRATE")] ??= {})["${id}"] ??= []).push(...${JSON.stringify(cache)});`,
}}
></script>
);
}
class RehydratingCache extends InMemoryCache {
context: RehydrationContext;
constructor(context: RehydrationContext) {
super();
this.context = context;
}
write(options: Cache.WriteOptions): Reference | undefined {
this.context.cache.push(options);
return super.write(options);
}
}
export const useSuspenseQuery = wrap(_useSuspenseQuery);
function wrap<T extends (...args: any[]) => any>(useFn: T): T {
return ((...args: any[]) => {
const id = useId();
useBeforeRehydrationContext(id);
let res = useFn(...args);
useAfterRehydrationContext(id);
return res;
}) as T;
}
phryneas
github-actions[bot]
Hi,
I've been looking at the code and doing some experiments myself. While I do not have an issue, I'd like to learn about some details (sorry if I missed something in the code thoguh, not really familiar with the apollo internals);
useTransportValueand keeping track of hook returns? It looks like as long as the cache is populated, on the client side, the return values will be consistent with the server. Is this for cases like auseSuspendQueryrunning first, populating some cache anduseQuerysomewhere else running the same query?transportedValuesand theincomingResultswill duplicate almost every result. Any chance to avoid this?transportedValueshaveuseIdkeys so they should be fine butincomingResultswould not work (I assume). Any chance to keep track of multipleApolloRehydrationContextinstances also usinguseIdor something like that? I guessuseRehydrationContextcould also receive an id parameter fromuseTransportValueand only restore the cache entries belonging to that id? That should also solve the keeping track of transportValues I guess? Cache would be consistent with whatever happened on server if eachuseTransportValuecall would restore specific cache belonging to that id.Also, the beta client exports
useSuspenseQuerywithout_experimentalsuffix now.