this repo has no description
0
fork

Configure Feed

Select the types of activity you want to include in your feed.

servers

+76 -73
+8 -13
src/routes/basic.tsx
··· 13 13 TableRow, 14 14 } from "~/components/ui/table"; 15 15 import { cn } from "~/lib/utils"; 16 - import { POKEMON_LIMIT, getServerPokemonList } from "~/util/pokemon"; 16 + import { 17 + POKEMON_LIMIT, 18 + getPokemonListQueryKey, 19 + getServerPokemonListQueryFn, 20 + } from "~/util/pokemon"; 17 21 18 22 const searchParamsSchema = v.object({ 19 23 offset: v.optional(v.number(), 0), ··· 25 29 }); 26 30 27 31 function RouteComponent() { 28 - const getPokemonList = useServerFn(getServerPokemonList); 29 32 const { offset: currentOffset } = Route.useSearch(); 30 - 31 - const newKey = [ 32 - "pokemon-list", 33 - "basic", 34 - { limit: POKEMON_LIMIT, offset: currentOffset }, 35 - ] as const; 36 - 33 + const getPokemonListQueryFn = useServerFn(getServerPokemonListQueryFn); 37 34 const { data, error } = useQuery({ 38 - queryKey: newKey, 39 - queryFn: async () => { 40 - return await getPokemonList({ data: { offset: currentOffset } }); 41 - }, 35 + queryKey: getPokemonListQueryKey("basic", currentOffset), 36 + queryFn: getPokemonListQueryFn, 42 37 }); 43 38 44 39 if (data) {
+14 -13
src/routes/intent-preloading.tsx
··· 2 2 import { Link } from "@tanstack/react-router"; 3 3 import { buttonVariants } from "~/components/ui/button"; 4 4 5 + import { useServerFn } from "@tanstack/react-start"; 5 6 import * as v from "valibot"; 6 7 import { 7 8 Table, ··· 12 13 TableRow, 13 14 } from "~/components/ui/table"; 14 15 import { cn } from "~/lib/utils"; 15 - import { POKEMON_LIMIT, getServerPokemonList } from "~/util/pokemon"; 16 + import { 17 + POKEMON_LIMIT, 18 + getPokemonListQueryKey, 19 + getServerPokemonListQueryFn, 20 + } from "~/util/pokemon"; 16 21 17 22 const searchParamsSchema = v.object({ 18 23 offset: v.optional(v.number(), 0), ··· 24 29 offset: search.offset, 25 30 }), 26 31 context: ({ deps }) => { 27 - const newKey = [ 28 - "pokemon-list", 29 - "intent-preloading", 30 - { limit: POKEMON_LIMIT, offset: deps.offset }, 31 - ] as const; 32 + const newKey = getPokemonListQueryKey("intent-preloading", deps.offset); 32 33 33 34 const pokemonListOptions = queryOptions({ 34 35 queryKey: newKey, 35 - queryFn: async () => { 36 - return await getServerPokemonList({ 37 - data: { offset: deps.offset }, 38 - }); 39 - }, 36 + queryFn: getServerPokemonListQueryFn, 40 37 }); 41 38 42 39 return { ··· 51 48 52 49 function RouteComponent() { 53 50 const { offset: currentOffset } = Route.useSearch(); 54 - const { pokemonListOptions } = Route.useRouteContext(); 51 + const { pokemonListOptions: serverPokemonListOptions } = 52 + Route.useRouteContext(); 55 53 56 - const { data } = useSuspenseQuery(pokemonListOptions); 54 + const { data } = useSuspenseQuery({ 55 + ...serverPokemonListOptions, 56 + queryFn: useServerFn(getServerPokemonListQueryFn), 57 + }); 57 58 58 59 return ( 59 60 <div className="p-4">
+18 -17
src/routes/pagination.tsx
··· 6 6 import { Link } from "@tanstack/react-router"; 7 7 import { buttonVariants } from "~/components/ui/button"; 8 8 9 + import { useServerFn } from "@tanstack/react-start"; 9 10 import * as v from "valibot"; 10 11 import { 11 12 Table, ··· 16 17 TableRow, 17 18 } from "~/components/ui/table"; 18 19 import { cn } from "~/lib/utils"; 19 - import { POKEMON_LIMIT, getServerPokemonList } from "~/util/pokemon"; 20 + import { 21 + POKEMON_LIMIT, 22 + getPokemonListQueryKey, 23 + getServerPokemonListQueryFn, 24 + } from "~/util/pokemon"; 20 25 21 26 const searchParamsSchema = v.object({ 22 27 offset: v.optional(v.number(), 0), ··· 28 33 offset: search.offset, 29 34 }), 30 35 context: ({ deps }) => { 31 - const newKey = [ 32 - "pokemon-list", 33 - "pagination", 34 - { offset: deps.offset }, 35 - ] as const; 36 + const newKey = getPokemonListQueryKey("pagination", deps.offset); 36 37 37 38 const pokemonListOptions = queryOptions({ 38 39 queryKey: newKey, 39 - queryFn: async ({ queryKey }) => { 40 - return await getServerPokemonList({ 41 - data: { offset: queryKey[2].offset }, 42 - }); 43 - }, 40 + queryFn: getServerPokemonListQueryFn, 44 41 }); 45 42 46 43 return { ··· 55 52 56 53 function RouteComponent() { 57 54 const { offset: currentOffset } = Route.useSearch(); 58 - const { pokemonListOptions } = Route.useRouteContext(); 55 + const { pokemonListOptions: serverPokemonListOptions } = 56 + Route.useRouteContext(); 59 57 const queryClient = useQueryClient(); 60 58 61 - const { data } = useSuspenseQuery(pokemonListOptions); 59 + const { data } = useSuspenseQuery({ 60 + ...serverPokemonListOptions, 61 + queryFn: useServerFn(getServerPokemonListQueryFn), 62 + }); 62 63 63 64 if (data.prevOffset !== null) { 64 65 void queryClient.prefetchQuery({ 65 - ...pokemonListOptions, 66 - queryKey: ["pokemon-list", "pagination", { offset: data.prevOffset }], 66 + ...serverPokemonListOptions, 67 + queryKey: getPokemonListQueryKey("pagination", data.prevOffset), 67 68 }); 68 69 } 69 70 70 71 if (data.nextOffset !== null) { 71 72 void queryClient.prefetchQuery({ 72 - ...pokemonListOptions, 73 - queryKey: ["pokemon-list", "pagination", { offset: data.nextOffset }], 73 + ...serverPokemonListOptions, 74 + queryKey: getPokemonListQueryKey("pagination", data.nextOffset), 74 75 }); 75 76 } 76 77
+14 -16
src/routes/preloading.tsx
··· 2 2 import { Link } from "@tanstack/react-router"; 3 3 import { buttonVariants } from "~/components/ui/button"; 4 4 5 - import { useMemo } from "react"; 5 + import { useServerFn } from "@tanstack/react-start"; 6 6 import * as v from "valibot"; 7 7 import { 8 8 Table, ··· 13 13 TableRow, 14 14 } from "~/components/ui/table"; 15 15 import { cn } from "~/lib/utils"; 16 - import { POKEMON_LIMIT, getServerPokemonList } from "~/util/pokemon"; 17 - 18 - const matchPokemonIdExp = /\/api\/v2\/pokemon\/(\d+)\/?/; 16 + import { 17 + POKEMON_LIMIT, 18 + getPokemonListQueryKey, 19 + getServerPokemonListQueryFn, 20 + } from "~/util/pokemon"; 19 21 20 22 const searchParamsSchema = v.object({ 21 23 offset: v.optional(v.number(), 0), ··· 27 29 offset: search.offset, 28 30 }), 29 31 context: ({ deps }) => { 30 - const newKey = [ 31 - "pokemon-list", 32 - "preloading", 33 - { limit: POKEMON_LIMIT, offset: deps.offset }, 34 - ] as const; 32 + const newKey = getPokemonListQueryKey("preloading", deps.offset); 35 33 36 34 const pokemonListOptions = queryOptions({ 37 35 queryKey: newKey, 38 - queryFn: async () => { 39 - return await getServerPokemonList({ 40 - data: { offset: deps.offset }, 41 - }); 42 - }, 36 + queryFn: getServerPokemonListQueryFn, 43 37 }); 44 38 45 39 return { ··· 54 48 55 49 function RouteComponent() { 56 50 const { offset: currentOffset } = Route.useSearch(); 57 - const { pokemonListOptions } = Route.useRouteContext(); 51 + const { pokemonListOptions: serverPokemonListOptions } = 52 + Route.useRouteContext(); 58 53 59 - const { data } = useSuspenseQuery(pokemonListOptions); 54 + const { data } = useSuspenseQuery({ 55 + ...serverPokemonListOptions, 56 + queryFn: useServerFn(getServerPokemonListQueryFn), 57 + }); 60 58 61 59 return ( 62 60 <div className="p-4">
+9 -13
src/routes/suspense.tsx
··· 2 2 import { Link } from "@tanstack/react-router"; 3 3 import { buttonVariants } from "~/components/ui/button"; 4 4 5 + import { useServerFn } from "@tanstack/react-start"; 5 6 import * as v from "valibot"; 6 7 import { 7 8 Table, ··· 12 13 TableRow, 13 14 } from "~/components/ui/table"; 14 15 import { cn } from "~/lib/utils"; 15 - import { POKEMON_LIMIT, getServerPokemonList } from "~/util/pokemon"; 16 + import { 17 + POKEMON_LIMIT, 18 + getPokemonListQueryKey, 19 + getServerPokemonListQueryFn, 20 + } from "~/util/pokemon"; 16 21 17 22 const searchParamsSchema = v.object({ 18 23 offset: v.optional(v.number(), 0), ··· 25 30 26 31 function RouteComponent() { 27 32 const { offset: currentOffset } = Route.useSearch(); 28 - 29 - const newKey = [ 30 - "pokemon-list", 31 - "suspense", 32 - { limit: POKEMON_LIMIT, offset: currentOffset }, 33 - ] as const; 33 + const getPokemonListQueryFn = useServerFn(getServerPokemonListQueryFn); 34 34 35 35 const { data } = useSuspenseQuery({ 36 - queryKey: newKey, 37 - queryFn: async () => { 38 - return await getServerPokemonList({ 39 - data: { offset: currentOffset }, 40 - }); 41 - }, 36 + queryKey: getPokemonListQueryKey("suspense", currentOffset), 37 + queryFn: getPokemonListQueryFn, 42 38 }); 43 39 44 40 return (
+13 -1
src/util/pokemon.ts
··· 1 + import type { QueryFunctionContext } from "@tanstack/react-query"; 1 2 import { createServerFn } from "@tanstack/react-start"; 2 3 import * as v from "valibot"; 3 4 import { DB } from "~/data/db"; ··· 30 31 }; 31 32 }; 32 33 33 - export const getServerPokemonList = createServerFn({ method: "GET" }) 34 + const getServerPokemonList = createServerFn({ method: "GET" }) 34 35 .validator((params) => { 35 36 const validated = v.parse(PokemonListParamsSchema, params); 36 37 const offset = validated.offset ?? 0; ··· 43 44 .handler(async ({ data }) => { 44 45 return await innerGetPokemonList(data.offset); 45 46 }); 47 + 48 + export const getPokemonListQueryKey = (location: string, offset: number) => { 49 + return ["pokemon-list", location, { offset }] as const; 50 + }; 51 + 52 + export const getServerPokemonListQueryFn = ({ 53 + queryKey, 54 + }: QueryFunctionContext<ReturnType<typeof getPokemonListQueryKey>>) => { 55 + const { offset } = queryKey[2]; 56 + return getServerPokemonList({ data: { offset } }); 57 + };