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:
parent
f520457e28
commit
908fc5a44a
1 changed files with 7 additions and 1 deletions
|
|
@ -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'
|
||||
|
|
|
|||
Loading…
Reference in a new issue