charred pebble
Hi all, I'm using react query to manage my browser based video editor's asset library:
const assetQuery = useQuery({
queryKey: ["assets"],
queryFn: async () => {
const response = await fetch("/api/assets")
const data = await response.json()
const assetsPresignedURLs = await Promise.all(
data.map((asset: Asset) =>
fetch(`/api/s3/presigned-get/`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ key: asset.key }),
})
.then((response) => response.json())
.then((data) => data.url)
)
)
data.forEach((asset: Asset & { presignedURL: string }, index: number) => {
asset.presignedURL = assetsPresignedURLs[index]
})
return data
},
initialData: editorAssets,
})
Since the files are hosted in a private Cloudflare R2 bucket, I need to get presigned URLs to access them so I set up this query to do so. However whenever the page loads, it shows the initial content (thanks to SSR from NextJS) and then flashes once react query revalidates.
I checked both JSON objects, they're the exact same. Why would it cause a re-render?
vagrant gate
dreamy halo