fix: deduplicate search results to prevent duplicate key error

The API may return the same item across multiple pages during infinite scroll.
This causes Svelte's keyed each block to throw a duplicate key error.

Fix by deduplicating results by id using a Map before rendering.

Co-Authored-By: Justin Edmund <justin@jedmund.com>
This commit is contained in:
Devin AI 2025-11-29 09:05:17 +00:00
parent f520457e28
commit 908fc5a44a

View file

@ -112,10 +112,16 @@
})
// Flatten all pages into a single items array
const searchResults = $derived(
const rawResults = $derived(
searchQueryResult.data?.pages.flatMap((page) => page.results) ?? []
)
// Deduplicate by id - needed because the API may return the same item across pages
// (e.g., due to items being added/removed between page fetches)
const searchResults = $derived(
Array.from(new Map(rawResults.map((item) => [item.id, item])).values())
)
// Use runed's IsInViewport for viewport detection
const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '200px'