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