Skip to content

Commit c98effa

Browse files
erquharterquhart
authored
fix: render stat counters on client load (#476)
1 parent eecb250 commit c98effa

14 files changed

Lines changed: 99 additions & 76 deletions

‎src/components/OpenSourceStats.tsx‎

Lines changed: 13 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -61,18 +61,20 @@ const NpmDownloadCounter = ({
6161
return <StableCounter value={count} intervalMs={intervalMs} />
6262
}
6363

64+
export function ossStatsQuery({ library }: { library?: Library } = {}) {
65+
return convexQuery(api.stats.getStats, {
66+
library: library
67+
? {
68+
id: library.id,
69+
repo: library.repo,
70+
frameworks: library.frameworks,
71+
}
72+
: undefined,
73+
})
74+
}
75+
6476
export function _OssStats({ library }: { library?: Library }) {
65-
const { data: stats } = useSuspenseQuery(
66-
convexQuery(api.stats.getStats, {
67-
library: library
68-
? {
69-
id: library.id,
70-
repo: library.repo,
71-
frameworks: library.frameworks,
72-
}
73-
: undefined,
74-
})
75-
)
77+
const { data: stats } = useSuspenseQuery(ossStatsQuery({ library }))
7678

7779
return (
7880
<div>

‎src/routes/_libraries/config.$version.index.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,10 +11,15 @@ import { seo } from '~/utils/seo'
1111
import LandingPageGad from '~/components/LandingPageGad'
1212
import { PartnershipCallout } from '~/components/PartnershipCallout'
1313
import { PartnersSection } from '~/components/PartnersSection'
14-
import OpenSourceStats from '~/components/OpenSourceStats'
14+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
15+
16+
const library = getLibrary('config')
1517

1618
export const Route = createFileRoute({
1719
component: FormVersionIndex,
20+
loader: async ({ context: { queryClient } }) => {
21+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
22+
},
1823
head: () => ({
1924
meta: seo({
2025
title: configProject.name,
@@ -27,7 +32,6 @@ const librariesRouteApi = getRouteApi('/_libraries')
2732

2833
export default function FormVersionIndex() {
2934
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
30-
const library = getLibrary('config')
3135

3236
return (
3337
<>

‎src/routes/_libraries/db.$version.index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,10 @@ import { getLibrary } from '~/libraries'
1010
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
1111
import LandingPageGad from '~/components/LandingPageGad'
1212
import { PartnershipCallout } from '~/components/PartnershipCallout'
13-
import OpenSourceStats from '~/components/OpenSourceStats'
13+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
14+
15+
const library = getLibrary('db')
16+
const librariesRouteApi = getRouteApi('/_libraries')
1417

1518
export const Route = createFileRoute({
1619
component: DBVersionIndex,
@@ -20,11 +23,11 @@ export const Route = createFileRoute({
2023
description: dbProject.description,
2124
}),
2225
}),
26+
loader: async ({ context: { queryClient } }) => {
27+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
28+
},
2329
})
2430

25-
const librariesRouteApi = getRouteApi('/_libraries')
26-
const library = getLibrary('db')
27-
2831
export default function DBVersionIndex() {
2932
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3033

‎src/routes/_libraries/devtools.$version.index.tsx‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import { seo } from '~/utils/seo'
1111
import LandingPageGad from '~/components/LandingPageGad'
1212
import { PartnershipCallout } from '~/components/PartnershipCallout'
1313
import { PartnersSection } from '~/components/PartnersSection'
14-
import OpenSourceStats from '~/components/OpenSourceStats'
14+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
15+
16+
const librariesRouteApi = getRouteApi('/_libraries')
17+
const library = getLibrary('devtools')
1518

1619
export const Route = createFileRoute({
1720
component: DevtoolsVersionIndex,
@@ -21,10 +24,11 @@ export const Route = createFileRoute({
2124
description: devtoolsProject.description,
2225
}),
2326
}),
27+
loader: async ({ context: { queryClient } }) => {
28+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
29+
},
2430
})
2531

26-
const librariesRouteApi = getRouteApi('/_libraries')
27-
2832
export default function DevtoolsVersionIndex() {
2933
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3034
const library = getLibrary('devtools')

‎src/routes/_libraries/form.$version.index.tsx‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,10 @@ import { StackBlitzEmbed } from '~/components/StackBlitzEmbed'
1515
import LandingPageGad from '~/components/LandingPageGad'
1616
import { PartnershipCallout } from '~/components/PartnershipCallout'
1717
import { PartnersSection } from '~/components/PartnersSection'
18-
import OpenSourceStats from '~/components/OpenSourceStats'
18+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
19+
20+
const librariesRouteApi = getRouteApi('/_libraries')
21+
const library = getLibrary('form')
1922

2023
export const Route = createFileRoute({
2124
component: FormVersionIndex,
@@ -25,12 +28,11 @@ export const Route = createFileRoute({
2528
description: formProject.description,
2629
}),
2730
}),
31+
loader: async ({ context: { queryClient } }) => {
32+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
33+
},
2834
})
2935

30-
const librariesRouteApi = getRouteApi('/_libraries')
31-
32-
const library = getLibrary('form')
33-
3436
export default function FormVersionIndex() {
3537
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3638
const { version } = Route.useParams()
@@ -53,7 +55,7 @@ export default function FormVersionIndex() {
5355
className: 'bg-yellow-400 text-black',
5456
}}
5557
/>
56-
58+
5759
<div className="w-fit mx-auto px-4">
5860
<OpenSourceStats library={library} />
5961
</div>

‎src/routes/_libraries/index.tsx‎

Lines changed: 1 addition & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -42,18 +42,7 @@ const courses = [
4242

4343
export const Route = createFileRoute({
4444
loader: async ({ context: { queryClient } }) => {
45-
const githubQuery = queryClient.ensureQueryData(
46-
convexQuery(api.stats.getGithubOwner, {
47-
owner: 'tanstack',
48-
})
49-
)
50-
const npmQuery = queryClient.ensureQueryData(
51-
convexQuery(api.stats.getNpmOrg, {
52-
name: 'tanstack',
53-
})
54-
)
55-
56-
await Promise.all([githubQuery, npmQuery])
45+
await queryClient.ensureQueryData(convexQuery(api.stats.getStats, {}))
5746

5847
return {
5948
randomNumber: Math.random(),

‎src/routes/_libraries/pacer.$version.index.tsx‎

Lines changed: 8 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import { getLibrary } from '~/libraries'
1111
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
1212
import LandingPageGad from '~/components/LandingPageGad'
1313
import { PartnershipCallout } from '~/components/PartnershipCallout'
14-
import OpenSourceStats from '~/components/OpenSourceStats'
14+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
15+
16+
const librariesRouteApi = getRouteApi('/_libraries')
17+
const library = getLibrary('pacer')
1518

1619
export const Route = createFileRoute({
1720
component: PacerVersionIndex,
@@ -21,11 +24,11 @@ export const Route = createFileRoute({
2124
description: pacerProject.description,
2225
}),
2326
}),
27+
loader: async ({ context: { queryClient } }) => {
28+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
29+
},
2430
})
2531

26-
const librariesRouteApi = getRouteApi('/_libraries')
27-
const library = getLibrary('pacer')
28-
2932
export default function PacerVersionIndex() {
3033
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3134
const { version } = Route.useParams()
@@ -49,7 +52,7 @@ export default function PacerVersionIndex() {
4952
<div className="w-fit mx-auto px-4">
5053
<OpenSourceStats library={library} />
5154
</div>
52-
55+
5356
<LibraryFeatureHighlights
5457
featureHighlights={library.featureHighlights}
5558
/>

‎src/routes/_libraries/query.$version.index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,10 @@ import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
1919
import { partners } from '~/utils/partners'
2020
import LandingPageGad from '~/components/LandingPageGad'
2121
import { PartnershipCallout } from '~/components/PartnershipCallout'
22-
import OpenSourceStats from '~/components/OpenSourceStats'
22+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
23+
24+
const librariesRouteApi = getRouteApi('/_libraries')
25+
const library = getLibrary('query')
2326

2427
export const Route = createFileRoute({
2528
component: VersionIndex,
@@ -29,12 +32,11 @@ export const Route = createFileRoute({
2932
description: queryProject.description,
3033
}),
3134
}),
35+
loader: async ({ context: { queryClient } }) => {
36+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
37+
},
3238
})
3339

34-
const librariesRouteApi = getRouteApi('/_libraries')
35-
36-
const library = getLibrary('query')
37-
3840
export default function VersionIndex() {
3941
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
4042
const { version } = Route.useParams()

‎src/routes/_libraries/ranger.$version.index.tsx‎

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ import { seo } from '~/utils/seo'
1111
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
1212
import LandingPageGad from '~/components/LandingPageGad'
1313
import { PartnersSection } from '~/components/PartnersSection'
14-
import OpenSourceStats from '~/components/OpenSourceStats'
14+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
15+
16+
const librariesRouteApi = getRouteApi('/_libraries')
17+
const library = getLibrary('ranger')
1518

1619
export const Route = createFileRoute({
1720
component: VersionIndex,
@@ -21,11 +24,11 @@ export const Route = createFileRoute({
2124
description: rangerProject.description,
2225
}),
2326
}),
27+
loader: async ({ context: { queryClient } }) => {
28+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
29+
},
2430
})
2531

26-
const librariesRouteApi = getRouteApi('/_libraries')
27-
const library = getLibrary('ranger')
28-
2932
export default function VersionIndex() {
3033
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3134
const { version } = Route.useParams()

‎src/routes/_libraries/router.$version.index.tsx‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,10 @@ import { Framework, getBranch, getLibrary } from '~/libraries'
1212
import { seo } from '~/utils/seo'
1313
import { LibraryFeatureHighlights } from '~/components/LibraryFeatureHighlights'
1414
import LandingPageGad from '~/components/LandingPageGad'
15-
import OpenSourceStats from '~/components/OpenSourceStats'
15+
import OpenSourceStats, { ossStatsQuery } from '~/components/OpenSourceStats'
16+
17+
const librariesRouteApi = getRouteApi('/_libraries')
18+
const library = getLibrary('router')
1619

1720
export const Route = createFileRoute({
1821
component: RouterVersionIndex,
@@ -22,12 +25,11 @@ export const Route = createFileRoute({
2225
description: routerProject.description,
2326
}),
2427
}),
28+
loader: async ({ context: { queryClient } }) => {
29+
await queryClient.ensureQueryData(ossStatsQuery({ library }))
30+
},
2531
})
2632

27-
const librariesRouteApi = getRouteApi('/_libraries')
28-
29-
const library = getLibrary('router')
30-
3133
function RouterVersionIndex() {
3234
const { sponsorsPromise } = librariesRouteApi.useLoaderData()
3335
const { version } = Route.useParams()

0 commit comments

Comments
 (0)