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/intent-preloading")({
19 staticData: {
20 routeTitle: "03_intent-preloading",
21 routeSubtitle: "// Hover-based prefetch",
22 },
23 validateSearch: searchParamsSchema,
24 loaderDeps: ({ search }) => ({
25 offset: search.offset,
26 }),
27 context: ({ deps }) => {
28 const newKey = getPokemonListQueryKey("intent-preloading", deps.offset);
29
30 const pokemonListOptions = queryOptions({
31 queryKey: newKey,
32 queryFn: getPokemonListQueryFn,
33 });
34
35 const intentArticleQueryOptions = getArticleQueryOptions({
36 slug: "intent-preloading",
37 });
38
39 return {
40 pokemonListOptions,
41 intentArticleQueryOptions,
42 };
43 },
44 loader: async ({ context: { queryClient, pokemonListOptions, intentArticleQueryOptions } }) => {
45 void queryClient.prefetchQuery(pokemonListOptions);
46 await queryClient.ensureQueryData(intentArticleQueryOptions);
47 },
48 component: RouteComponent,
49});
50
51function RouteComponent() {
52 const { offset: currentOffset } = Route.useSearch();
53 const { intentArticleQueryOptions } = Route.useRouteContext();
54
55 const {
56 data: { Article },
57 } = useSuspenseQuery(intentArticleQueryOptions);
58
59 return (
60 <ChapterSplitColumn
61 blog={Article}
62 table={
63 <DemoCard className="mb-6">
64 <PokedexTableSection
65 currentOffset={currentOffset}
66 fallbackPagination={
67 <PokedexPagination prevOffset={null} nextOffset={null} to="/intent-preloading" />
68 }
69 >
70 <PokemonTableContent />
71 </PokedexTableSection>
72 </DemoCard>
73 }
74 />
75 );
76}
77
78function PokemonTableContent() {
79 const { pokemonListOptions } = useRouteContext({ from: "/_chapters/intent-preloading" });
80 const { data } = useSuspenseQuery(pokemonListOptions);
81
82 return (
83 <PokedexTableResults
84 pokemon={data.pokemon}
85 pagination={
86 <PokedexPagination
87 prefetch="intent"
88 prevOffset={data.prevOffset}
89 nextOffset={data.nextOffset}
90 to="/intent-preloading"
91 />
92 }
93 />
94 );
95}