fix: scroll to hash anchor after Apollo data loads on tournament page

The browser fires native hash-scroll before useQuery resolves, so the
target element doesn't exist yet. A useEffect keyed on data re-scrolls
once the matches are in the DOM.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-14 19:36:08 +02:00
parent e4d9772c47
commit 25e440f5a4
+9 -1
View File
@@ -1,6 +1,6 @@
'use client' 'use client'
import { useQuery, gql } from '@/lib/graphql/hooks' import { useQuery, gql } from '@/lib/graphql/hooks'
import { use } from 'react' import { use, useEffect } from 'react'
import Link from 'next/link' import Link from 'next/link'
import { TeamFlag } from '@/components/team-flag' import { TeamFlag } from '@/components/team-flag'
import { MatchCard } from '@/components/match-card' import { MatchCard } from '@/components/match-card'
@@ -64,6 +64,14 @@ export default function TournamentPage({ params }: { params: Promise<{ year: str
const year = parseInt(yearStr) const year = parseInt(yearStr)
const { data, loading } = useQuery(TOURNAMENT_QUERY, { variables: { year }, pollInterval: year === 2026 ? 60_000 : 0 }) const { data, loading } = useQuery(TOURNAMENT_QUERY, { variables: { year }, pollInterval: year === 2026 ? 60_000 : 0 })
useEffect(() => {
if (!data) return
const hash = window.location.hash
if (!hash) return
const el = document.getElementById(hash.slice(1))
if (el) el.scrollIntoView({ behavior: 'smooth', block: 'center' })
}, [data])
const t = data?.tournament const t = data?.tournament
const standings: Standing[] = data?.groupStandings ?? [] const standings: Standing[] = data?.groupStandings ?? []
const byGroup = standings.reduce<Record<string, Standing[]>>((acc, s) => { const byGroup = standings.reduce<Record<string, Standing[]>>((acc, s) => {