SkateSpots/src/hooks/useSkateSpots.ts
shakespeare.diy 72cb690e64 fix: increase relay query timeouts and fix AppConfigSchema for cold mobile loads
- Raise QUERY_TIMEOUT in useSkateSpots from 8s to 15s
- Raise AbortSignal.timeout in useLabProfiles and useSkateEvents from 10s to 15s
- Add useSkateRelay to AppConfigSchema so it's preserved when reading from localStorage

On a fresh phone (no warm WebSocket, no TanStack Query cache), the app
needs to: load JS bundle, boot React providers, open a WebSocket to
goskatespots.nostr1.com, and receive EOSE — all before the timeout.
On slow mobile connections this easily exceeded the old 8-10s limits,
causing /home to show empty sections while /map worked (the connection
was already warm by then). 15s gives cold connections enough headroom.

Co-authored-by: shakespeare.diy <assistant@shakespeare.diy>
2026-06-18 15:28:26 +07:00

145 lines
4.1 KiB
TypeScript

import { useQuery } from '@tanstack/react-query';
import { SKATE_SPOT_KIND, parseSkateSpot, type SkateSpot } from '@/lib/types';
import { useSkateRelays } from '@/hooks/useSkateRelays';
import { cacheSpots, getAllCachedSpots, isOffline } from '@/lib/offlineCache';
// Spots change infrequently — cache for 5 minutes, keep for 30 minutes
const SPOTS_STALE_TIME = 5 * 60 * 1000; // 5 min
const SPOTS_GC_TIME = 30 * 60 * 1000; // 30 min
const QUERY_TIMEOUT = 15000; // 15s — mobile cold-start needs more time
export function useSkateSpots(limit = 100) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['skate-spots', limit, getQueryKeySuffix()],
queryFn: async () => {
// If offline, return cached spots
if (isOffline()) {
const cachedSpots = await getAllCachedSpots();
return cachedSpots.sort((a, b) => b.createdAt - a.createdAt).slice(0, limit);
}
const signal = AbortSignal.timeout(QUERY_TIMEOUT);
const events = await querySkateContent(
[
{
kinds: [SKATE_SPOT_KIND],
'#t': ['skatespot'],
limit,
},
],
{ signal }
);
const spots: SkateSpot[] = [];
const spotsWithEvents: Array<{ event: typeof events[0]; spot: SkateSpot }> = [];
for (const event of events) {
const spot = parseSkateSpot(event);
if (spot) {
spots.push(spot);
spotsWithEvents.push({ event, spot });
}
}
// Cache spots in the background for offline use
if (spotsWithEvents.length > 0) {
cacheSpots(spotsWithEvents).catch(() => {});
}
return spots.sort((a, b) => b.createdAt - a.createdAt);
},
staleTime: SPOTS_STALE_TIME,
gcTime: SPOTS_GC_TIME,
// Don't force a relay round-trip on every navigation — use cache if fresh
refetchOnMount: true,
});
}
export function useSkateSpot(identifier: string, pubkey?: string) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['skate-spot', identifier, pubkey, getQueryKeySuffix()],
queryFn: async () => {
// If offline, try to get from cache first
if (isOffline() && pubkey) {
const { getCachedSpot } = await import('@/lib/offlineCache');
const cached = await getCachedSpot(pubkey, identifier);
if (cached) return cached;
}
const signal = AbortSignal.timeout(QUERY_TIMEOUT);
const filter: {
kinds: number[];
'#d': string[];
authors?: string[];
limit: number;
} = {
kinds: [SKATE_SPOT_KIND],
'#d': [identifier],
limit: 1,
};
if (pubkey) {
filter.authors = [pubkey];
}
const events = await querySkateContent([filter], { signal });
if (events.length === 0) return null;
const spot = parseSkateSpot(events[0]);
// Cache the spot for offline use
if (spot) {
const { cacheSpot } = await import('@/lib/offlineCache');
cacheSpot(events[0], spot).catch(() => {});
}
return spot;
},
enabled: !!identifier,
staleTime: SPOTS_STALE_TIME,
gcTime: SPOTS_GC_TIME,
refetchOnMount: true,
});
}
export function useUserSkateSpots(pubkey: string) {
const { querySkateContent, getQueryKeySuffix } = useSkateRelays();
return useQuery({
queryKey: ['user-skate-spots', pubkey, getQueryKeySuffix()],
queryFn: async () => {
const signal = AbortSignal.timeout(QUERY_TIMEOUT);
const events = await querySkateContent(
[
{
kinds: [SKATE_SPOT_KIND],
authors: [pubkey],
'#t': ['skatespot'],
limit: 50,
},
],
{ signal }
);
const spots: SkateSpot[] = [];
for (const event of events) {
const spot = parseSkateSpot(event);
if (spot) spots.push(spot);
}
return spots.sort((a, b) => b.createdAt - a.createdAt);
},
enabled: !!pubkey,
staleTime: SPOTS_STALE_TIME,
gcTime: SPOTS_GC_TIME,
refetchOnMount: true,
});
}