this repo has no description
servers
+76
-73
+8
-13
src/routes/basic.tsx
+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
+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
+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
+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
+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
+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
+
};