this repo has no description
1import { createFileRoute } from "@tanstack/react-router";
2import { useSuspenseQuery } from "@tanstack/react-query";
3import * as v from "valibot";
4import { DemoCard } from "~/demos/components/demo-card";
5import {
6 PokedexPagination,
7 PokedexTableResults,
8 PokedexTableSection,
9} from "~/demos/components/pokedex-table-section";
10import { getPokemonListQueryFn, getPokemonListQueryKey } from "~/demos/query/pokemon-query";
11import { getArticleQueryOptions } from "~/articles/querys";
12import { ChapterSplitColumn } from "~/chapters/chapter-split";
13
14const searchParamsSchema = v.object({
15 offset: v.optional(v.number(), 0),
16});
17
18export const Route = createFileRoute("/_chapters/basic")({
19 staticData: {
20 routeTitle: "01_basic",
21 routeSubtitle: "// Baseline fetching",
22 },
23 context: () => {
24 const noPrefetchArticleQueryOptions = getArticleQueryOptions({
25 slug: "basic",
26 });
27 return { noPrefetchArticleQueryOptions };
28 },
29 validateSearch: searchParamsSchema,
30 loader: async ({ context: { queryClient, noPrefetchArticleQueryOptions } }) => {
31 await queryClient.ensureQueryData(noPrefetchArticleQueryOptions);
32 },
33 component: RouteComponent,
34});
35
36function RouteComponent() {
37 const { offset: currentOffset } = Route.useSearch();
38 const { noPrefetchArticleQueryOptions } = Route.useRouteContext();
39
40 const {
41 data: { Article },
42 } = useSuspenseQuery(noPrefetchArticleQueryOptions);
43
44 return (
45 <ChapterSplitColumn
46 blog={Article}
47 table={
48 <DemoCard className="mb-6">
49 <PokedexTableSection
50 currentOffset={currentOffset}
51 fallbackPagination={
52 <PokedexPagination prevOffset={null} nextOffset={null} to="/basic" />
53 }
54 >
55 <PokemonTableContent currentOffset={currentOffset} />
56 </PokedexTableSection>
57 </DemoCard>
58 }
59 />
60 );
61}
62
63function PokemonTableContent({ currentOffset }: { currentOffset: number }) {
64 const queryKey = getPokemonListQueryKey("suspense", currentOffset);
65 const { data } = useSuspenseQuery({
66 queryKey,
67 queryFn: getPokemonListQueryFn,
68 });
69
70 return (
71 <PokedexTableResults
72 pokemon={data.pokemon}
73 pagination={
74 <PokedexPagination prevOffset={data.prevOffset} nextOffset={data.nextOffset} to="/basic" />
75 }
76 />
77 );
78}