granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix: deduplicate search results to prevent duplicate key error

Browse source 
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
1 changed files with 7 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
src/lib/components/sidebar/SearchContent.svelte
View file

@ -112,10 +112,16 @@
}) })
// Flatten all pages into a single items array // Flatten all pages into a single items array
const searchResults = $derived( const rawResults = $derived(
searchQueryResult.data?.pages.flatMap((page) => page.results) ?? [] 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 // Use runed's IsInViewport for viewport detection
const inViewport = new IsInViewport(() => sentinelEl, { const inViewport = new IsInViewport(() => sentinelEl, {
rootMargin: '200px' rootMargin: '200px'