tmp

src/lib/client/poap.ts

@@ -1,9 +1,9 @@
-import { getContextClient, queryStore } from '@urql/svelte'
+import { getContextClient } from '@urql/svelte'
 import type { POAPEventMetadata, POAPEventWithTokens, POAPTokenWithEvent } from '$lib/types/poap'
 import { Cache } from './cache'
 import { query } from './graphql'
 import { fetchJson } from './json'
-import { withPolling } from './urql'
+import { withInitialData, withPolling } from './urql'
 
 const apiBasePath = '/api/poap'
 const metadataCache = new Cache<string, POAPEventMetadata>()
@@ -16,40 +16,52 @@ export async function fetchPOAPMetadata(eventId: string) {
   )
 }
 
-interface FetchPOAPEventsVariables {
+export interface FetchPOAPEventsVariables {
   ids: number[]
 }
 
-interface FetchPOAPEventsData {
+export interface FetchPOAPEventsData {
   events: POAPEventWithTokens[]
 }
 
-export function queryPOAPEvents(ids: FetchPOAPEventsVariables['ids']) {
-  return withPolling<FetchPOAPEventsData, FetchPOAPEventsVariables>({
-    client: getContextClient(),
-    query: query.events,
-    variables: {
-      ids,
+export function queryPOAPEvents(
+  ids: FetchPOAPEventsVariables['ids'],
+  initialData?: FetchPOAPEventsData,
+) {
+  return withPolling<FetchPOAPEventsData, FetchPOAPEventsVariables>(
+    {
+      client: getContextClient(),
+      query: query.events,
+      variables: {
+        ids,
+      },
     },
-  })
+    initialData,
+  )
 }
 
-interface FetchPOAPTokensVariables {
+export interface FetchPOAPTokensVariables {
   first?: number
 }
 
-interface FetchPOAPTokensData {
+export interface FetchPOAPTokensData {
   tokens: POAPTokenWithEvent[]
 }
 
-export function queryPOAPTokens(first: FetchPOAPTokensVariables['first']) {
-  return withPolling<FetchPOAPTokensData, FetchPOAPTokensVariables>({
-    client: getContextClient(),
-    query: query.tokens,
-    variables: {
-      first,
+export function queryPOAPTokens(
+  first: FetchPOAPTokensVariables['first'],
+  initialData?: FetchPOAPTokensData,
+) {
+  return withPolling<FetchPOAPTokensData, FetchPOAPTokensVariables>(
+    {
+      client: getContextClient(),
+      query: query.tokens,
+      variables: {
+        first,
+      },
     },
-  })
+    initialData,
+  )
 }
 
 export interface FetchPOAPTokenVariables {
@@ -60,12 +72,18 @@ export interface FetchPOAPTokenData {
   token: POAPTokenWithEvent
 }
 
-export function queryPOAPToken(id: FetchPOAPTokenVariables['id']) {
-  return queryStore<FetchPOAPTokensData>({
-    client: getContextClient(),
-    query: query.token,
-    variables: {
-      id,
+export function queryPOAPToken(
+  id: FetchPOAPTokenVariables['id'],
+  initialData?: FetchPOAPTokensData,
+) {
+  return withInitialData<FetchPOAPTokensData>(
+    {
+      client: getContextClient(),
+      query: query.token,
+      variables: {
+        id,
+      },
     },
-  })
+    initialData,
+  )
 }

src/lib/client/urql.ts

@@ -6,10 +6,30 @@ import {
 } from '@urql/svelte'
 import { derived, readable, writable } from 'svelte/store'
 
+export function withInitialData<Data = unknown, Variables extends AnyVariables = AnyVariables>(
+  queryArgs: QueryArgs<Data, Variables>,
+  initialData?: Data,
+) {
+  if (!initialData) return queryStore(queryArgs)
+
+  const fetched = writable(false)
+  return derived([fetched, queryStore(queryArgs)], ([hasFetched, query]) => {
+    if (query.data) {
+      fetched.set(true)
+    }
+
+    return {
+      ...query,
+      data: hasFetched ? query.data : query.data || initialData,
+    }
+  })
+}
+
 export function withPolling<Data = unknown, Variables extends AnyVariables = AnyVariables>(
   queryArgs: QueryArgs<Data, Variables>,
+  initialData?: Data,
 ) {
-  const initial = queryStore(queryArgs)
+  const initial = withInitialData(queryArgs, initialData)
   const result = writable<OperationResultState<Data, Variables>>()
   const query = derived([initial, result], ([initial, next]) => {
     return next || initial

src/lib/components/Token/token.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { expoIn, expoOut } from 'svelte/easing'
   import { fly, fade } from 'svelte/transition'
+  import { browser } from '$app/environment'
   import { page } from '$app/stores'
   import { fetchENS } from '$lib/client/ens'
   import { fetchPOAPMetadata } from '$lib/client/poap'
@@ -21,15 +22,15 @@
 
   $: eventId = event.id
 
-  $: if (!metadata) {
+  $: if (!metadata && browser) {
     fetchPOAPMetadata(eventId)
       .then((data) => {
         metadata = data
       })
       .catch(console.error)
   }
 
-  $: if (!ens) {
+  $: if (!ens && browser) {
     fetchENS(token.owner.id)
       .then((res) => {
         ens = res

src/lib/server/constants.ts

@@ -0,0 +1 @@
+export const MaxItems = 5

src/lib/server/poap.ts

@@ -1,6 +1,12 @@
 import { createClient, query } from '$lib/client/graphql'
 import { fetchJson } from '$lib/client/json'
-import type { FetchPOAPTokenData } from '$lib/client/poap'
+import type {
+  FetchPOAPEventsData,
+  FetchPOAPEventsVariables,
+  FetchPOAPTokenData,
+  FetchPOAPTokensData,
+  FetchPOAPTokensVariables,
+} from '$lib/client/poap'
 import type { Fetch } from '$lib/client/types'
 import type { POAPEventMetadata } from '$lib/types/poap'
 import { POAP_API_KEY } from './env'
@@ -18,6 +24,14 @@ export function fetchPOAPMetadata(eventId: number, fetch: Fetch) {
   })
 }
 
+export function fetchPOAPEvents(ids: FetchPOAPEventsVariables['ids'], fetch: Fetch) {
+  return createClient(fetch).query<FetchPOAPEventsData>(query.events, { ids }).toPromise()
+}
+
+export function fetchPOAPTokens(first: FetchPOAPTokensVariables['first'], fetch: Fetch) {
+  return createClient(fetch).query<FetchPOAPTokensData>(query.tokens, { first }).toPromise()
+}
+
 export function fetchPOAPToken(id: number, fetch: Fetch) {
   return createClient(fetch).query<FetchPOAPTokenData>(query.token, { id }).toPromise()
 }

src/routes/+page.server.ts

@@ -0,0 +1,11 @@
+import { MaxItems } from '$lib/server/constants'
+import { fetchPOAPTokens } from '$lib/server/poap'
+import type { PageServerLoad } from './$types'
+
+export const load: PageServerLoad = async ({ fetch, url }) => {
+  const max = Number(url.searchParams.get('max')) || MaxItems
+
+  const query = await fetchPOAPTokens(max, fetch)
+
+  return { max, initialData: query.data }
+}

src/routes/+page.svelte

@@ -6,17 +6,19 @@
   import { Token } from '$lib/components/Token'
   import type { POAPTokenWithEvent } from '$lib/types/poap'
   import { collectItems } from '$lib/utils/items'
+  import type { PageData } from './$types'
 
-  const max = 5
-  const query = queryPOAPTokens(max).poll()
+  export let data: PageData
+
+  const query = queryPOAPTokens(data.max, data.initialData).poll()
   const set = new Set<string>()
 
   let tokens: POAPTokenWithEvent[] = []
 
-  $: tokens = collectItems(set, max, tokens, $query.data?.tokens, ({ id }) => id)
+  $: tokens = collectItems(set, data.max, tokens, $query.data?.tokens, ({ id }) => id)
 </script>
 
-<AppFrame>
+<AppFrame tokenId={tokens[0].id}>
   <div class="grid h-full">
     {#if $query.error}
       <ErrorMessage error={$query.error} />

src/routes/event/[id]/+page.server.ts

@@ -1,5 +1,6 @@
 import { error } from '@sveltejs/kit'
-import { fetchPOAPMetadata } from '$lib/server/poap'
+import { MaxItems } from '$lib/server/constants'
+import { fetchPOAPEvents, fetchPOAPMetadata } from '$lib/server/poap'
 import type { PageServerLoad } from './$types'
 
 export const load: PageServerLoad = async ({ fetch, params, url }) => {
@@ -12,12 +13,14 @@ export const load: PageServerLoad = async ({ fetch, params, url }) => {
     throw error(422, 'Invalid POAP event IDs')
   }
 
-  const max = Number(url.searchParams.get('max')) || 25
+  const max = Number(url.searchParams.get('max')) || MaxItems
 
-  const metadata = await Promise.all(ids.map((id) => fetchPOAPMetadata(id, fetch))).then(
-    (metadata) =>
+  const [metadata, query] = await Promise.all([
+    Promise.all(ids.map((id) => fetchPOAPMetadata(id, fetch))).then((metadata) =>
       Object.fromEntries(metadata.filter(Boolean).map((metadata) => [metadata.id, metadata])),
-  )
+    ),
+    fetchPOAPEvents(ids, fetch),
+  ])
 
-  return { ids, max, metadata }
+  return { ids, max, metadata, initialData: query.data }
 }

src/routes/event/[id]/+page.svelte

@@ -8,12 +8,16 @@
 
   export let data: PageData
 
-  const query = queryPOAPEvents(data.ids).poll()
+  const query = queryPOAPEvents(data.ids, data.initialData).poll()
 
   $: events = $query.data?.events
+
+  function latestToken() {
+    return events?.flatMap((e) => e.tokens).sort((a, b) => Number(b.created) - Number(a.created))[0]
+  }
 </script>
 
-<AppFrame route="/event" metadata={Object.values(data.metadata)}>
+<AppFrame route="/event" metadata={Object.values(data.metadata)} tokenId={latestToken()?.id}>
   <div class="grid h-full">
     {#if $query.error}
       <ErrorMessage error={$query.error} />