47 lines
1.4 KiB
TypeScript
47 lines
1.4 KiB
TypeScript
import { useEffect } from "react";
|
|
import { preload } from "react-dom";
|
|
import { useQueryClient } from "@tanstack/react-query";
|
|
import type { Particle } from "@/api/types";
|
|
import { apiClient } from "@/api/client";
|
|
|
|
// TODO: verify that caching is actually working by slowing down our network to simulate
|
|
/**
|
|
* Prefetches download URLs and warms the browser cache for adjacent media particles.
|
|
*/
|
|
export function usePrefetchAdjacentMedia(
|
|
children: Particle[],
|
|
currentIndex: number,
|
|
) {
|
|
const queryClient = useQueryClient();
|
|
|
|
useEffect(() => {
|
|
const adjacentIndices = [currentIndex - 1, currentIndex + 1];
|
|
const mediaParticles = adjacentIndices
|
|
.filter((i) => i >= 0 && i < children.length)
|
|
.map((i) => children[i])
|
|
.filter(
|
|
(p): p is Extract<Particle, { type: "media" }> => p.type === "media",
|
|
);
|
|
|
|
for (const particle of mediaParticles) {
|
|
const objectId = particle.properties.object_id;
|
|
|
|
queryClient
|
|
.prefetchQuery({
|
|
queryKey: ["download-url", objectId],
|
|
queryFn: () => apiClient.getParticleDownloadUrl(objectId),
|
|
staleTime: 1000 * 60 * 60,
|
|
})
|
|
.then(() => {
|
|
const url = queryClient.getQueryData<string>([
|
|
"download-url",
|
|
objectId,
|
|
]);
|
|
if (url) {
|
|
preload(url, { as: "fetch", crossOrigin: "anonymous" });
|
|
}
|
|
});
|
|
}
|
|
}, [children, currentIndex, queryClient]);
|
|
}
|