git.stevedylan.dev

Working TanStack Router Option dac750fc

Maximilian Leodolter · 2025-08-07 16:04 9 file(s) · +672 −0

src/templates/extras/client/src/routes/index.tsx/index-with-rpc-shadcn-tailwind-tanstackquery.tsx (added) +75 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "@/assets/beaver.svg";
4	+	import { Button } from "@/components/ui/button";
5	+	import { hcWithType } from "server/dist/client";
6	+	import { useMutation } from "@tanstack/react-query";
7	+
8	+	export const Route = createFileRoute("/")({
9	+	component: Index,
10	+	});
11	+
12	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
13	+
14	+	const client = hcWithType(SERVER_URL);
15	+
16	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
17	+
18	+	function Index() {
19	+	const [data, setData] = useState<
20	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
21	+	>();
22	+
23	+	const { mutate: sendRequest } = useMutation({
24	+	mutationFn: async () => {
25	+	try {
26	+	const res = await client.hello.$get();
27	+	if (!res.ok) {
28	+	console.log("Error fetching data");
29	+	return;
30	+	}
31	+	const data = await res.json();
32	+	setData(data);
33	+	} catch (error) {
34	+	console.log(error);
35	+	}
36	+	},
37	+	});
38	+
39	+	return (
40	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
41	+	<a
42	+	href="https://github.com/stevedylandev/bhvr"
43	+	target="_blank"
44	+	rel="noopener"
45	+	>
46	+	<img
47	+	src={beaver}
48	+	className="w-16 h-16 cursor-pointer"
49	+	alt="beaver logo"
50	+	/>
51	+	</a>
52	+	<h1 className="text-5xl font-black">bhvr</h1>
53	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
54	+	<p>A typesafe fullstack monorepo</p>
55	+	<div className="flex items-center gap-4">
56	+	<Button onClick={() => sendRequest()}>Call API</Button>
57	+	<Button variant="secondary" asChild>
58	+	<a target="_blank" href="https://bhvr.dev" rel="noopener">
59	+	Docs
60	+	</a>
61	+	</Button>
62	+	</div>
63	+	{data && (
64	+	<pre className="bg-gray-100 p-4 rounded-md">
65	+	<code>
66	+	Message: {data.message} <br />
67	+	Success: {data.success.toString()}
68	+	</code>
69	+	</pre>
70	+	)}
71	+	</div>
72	+	);
73	+	}
74	+
75	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-rpc-shadcn-tailwind.tsx (added) +72 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "@/assets/beaver.svg";
4	+	import { Button } from "@/components/ui/button";
5	+	import { hcWithType } from "server/dist/client";
6	+
7	+	export const Route = createFileRoute("/")({
8	+	component: Index,
9	+	});
10	+
11	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
12	+
13	+	const client = hcWithType(SERVER_URL);
14	+
15	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
16	+
17	+	function Index() {
18	+	const [data, setData] = useState<
19	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
20	+	>();
21	+
22	+	async function sendRequest() {
23	+	try {
24	+	const res = await client.hello.$get();
25	+	if (!res.ok) {
26	+	console.log("Error fetching data");
27	+	return;
28	+	}
29	+	const data = await res.json();
30	+	setData(data);
31	+	} catch (error) {
32	+	console.log(error);
33	+	}
34	+	}
35	+
36	+	return (
37	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
38	+	<a
39	+	href="https://github.com/stevedylandev/bhvr"
40	+	target="_blank"
41	+	rel="noopener"
42	+	>
43	+	<img
44	+	src={beaver}
45	+	className="w-16 h-16 cursor-pointer"
46	+	alt="beaver logo"
47	+	/>
48	+	</a>
49	+	<h1 className="text-5xl font-black">bhvr</h1>
50	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
51	+	<p>A typesafe fullstack monorepo</p>
52	+	<div className="flex items-center gap-4">
53	+	<Button onClick={sendRequest}>Call API</Button>
54	+	<Button variant="secondary" asChild>
55	+	<a target="_blank" href="https://bhvr.dev" rel="noopener">
56	+	Docs
57	+	</a>
58	+	</Button>
59	+	</div>
60	+	{data && (
61	+	<pre className="bg-gray-100 p-4 rounded-md">
62	+	<code>
63	+	Message: {data.message} <br />
64	+	Success: {data.success.toString()}
65	+	</code>
66	+	</pre>
67	+	)}
68	+	</div>
69	+	);
70	+	}
71	+
72	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-rpc-tailwind-tanstackquery.tsx (added) +83 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import { hcWithType } from "server/dist/client";
5	+	import { useMutation } from "@tanstack/react-query";
6	+
7	+	export const Route = createFileRoute("/")({
8	+	component: Index,
9	+	});
10	+
11	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
12	+
13	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
14	+
15	+	const client = hcWithType(SERVER_URL);
16	+
17	+	function Index() {
18	+	const [data, setData] = useState<
19	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
20	+	>();
21	+
22	+	const { mutate: sendRequest } = useMutation({
23	+	mutationFn: async () => {
24	+	try {
25	+	const res = await client.hello.$get();
26	+	if (!res.ok) {
27	+	console.log("Error fetching data");
28	+	return;
29	+	}
30	+	const data = await res.json();
31	+	setData(data);
32	+	} catch (error) {
33	+	console.log(error);
34	+	}
35	+	},
36	+	});
37	+
38	+	return (
39	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
40	+	<a
41	+	href="https://github.com/stevedylandev/bhvr"
42	+	target="_blank"
43	+	rel="noopener"
44	+	>
45	+	<img
46	+	src={beaver}
47	+	className="w-16 h-16 cursor-pointer"
48	+	alt="beaver logo"
49	+	/>
50	+	</a>
51	+	<h1 className="text-5xl font-black">bhvr</h1>
52	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
53	+	<p>A typesafe fullstack monorepo</p>
54	+	<div className="flex items-center gap-4">
55	+	<button
56	+	type="button"
57	+	onClick={() => sendRequest()}
58	+	className="bg-black text-white px-2.5 py-1.5 rounded-md"
59	+	>
60	+	Call API
61	+	</button>
62	+	<a
63	+	target="_blank"
64	+	href="https://bhvr.dev"
65	+	className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"
66	+	rel="noopener"
67	+	>
68	+	Docs
69	+	</a>
70	+	</div>
71	+	{data && (
72	+	<pre className="bg-gray-100 p-4 rounded-md">
73	+	<code>
74	+	Message: {data.message} <br />
75	+	Success: {data.success.toString()}
76	+	</code>
77	+	</pre>
78	+	)}
79	+	</div>
80	+	);
81	+	}
82	+
83	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-rpc-tailwind.tsx (added) +80 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import { hcWithType } from "server/dist/client";
5	+
6	+	export const Route = createFileRoute("/")({
7	+	component: Index,
8	+	});
9	+
10	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
11	+
12	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
13	+
14	+	const client = hcWithType(SERVER_URL);
15	+
16	+	function Index() {
17	+	const [data, setData] = useState<
18	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
19	+	>();
20	+
21	+	async function sendRequest() {
22	+	try {
23	+	const res = await client.hello.$get();
24	+	if (!res.ok) {
25	+	console.log("Error fetching data");
26	+	return;
27	+	}
28	+	const data = await res.json();
29	+	setData(data);
30	+	} catch (error) {
31	+	console.log(error);
32	+	}
33	+	}
34	+
35	+	return (
36	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
37	+	<a
38	+	href="https://github.com/stevedylandev/bhvr"
39	+	target="_blank"
40	+	rel="noopener"
41	+	>
42	+	<img
43	+	src={beaver}
44	+	className="w-16 h-16 cursor-pointer"
45	+	alt="beaver logo"
46	+	/>
47	+	</a>
48	+	<h1 className="text-5xl font-black">bhvr</h1>
49	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
50	+	<p>A typesafe fullstack monorepo</p>
51	+	<div className="flex items-center gap-4">
52	+	<button
53	+	type="button"
54	+	onClick={sendRequest}
55	+	className="bg-black text-white px-2.5 py-1.5 rounded-md"
56	+	>
57	+	Call API
58	+	</button>
59	+	<a
60	+	target="_blank"
61	+	href="https://bhvr.dev"
62	+	className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"
63	+	rel="noopener"
64	+	>
65	+	Docs
66	+	</a>
67	+	</div>
68	+	{data && (
69	+	<pre className="bg-gray-100 p-4 rounded-md">
70	+	<code>
71	+	Message: {data.message} <br />
72	+	Success: {data.success.toString()}
73	+	</code>
74	+	</pre>
75	+	)}
76	+	</div>
77	+	);
78	+	}
79	+
80	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-rpc-tanstackquery.tsx (added) +80 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import { hcWithType } from "server/dist/client";
5	+	import { useMutation } from "@tanstack/react-query";
6	+	import "../App.css";
7	+
8	+	export const Route = createFileRoute("/")({
9	+	component: Index,
10	+	});
11	+
12	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
13	+
14	+	const client = hcWithType(SERVER_URL);
15	+
16	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
17	+
18	+	function Index() {
19	+	const [data, setData] = useState<
20	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
21	+	>();
22	+
23	+	const { mutate: sendRequest } = useMutation({
24	+	mutationFn: async () => {
25	+	try {
26	+	const res = await client.hello.$get();
27	+	if (!res.ok) {
28	+	console.log("Error fetching data");
29	+	return;
30	+	}
31	+	const data = await res.json();
32	+	setData(data);
33	+	} catch (error) {
34	+	console.log(error);
35	+	}
36	+	},
37	+	});
38	+
39	+	return (
40	+	<>
41	+	<div>
42	+	<a
43	+	href="https://github.com/stevedylandev/bhvr"
44	+	target="_blank"
45	+	rel="noopener"
46	+	>
47	+	<img src={beaver} className="logo" alt="beaver logo" />
48	+	</a>
49	+	</div>
50	+	<h1>bhvr</h1>
51	+	<h2>Bun + Hono + Vite + React</h2>
52	+	<p>A typesafe fullstack monorepo</p>
53	+	<div className="card">
54	+	<div className="button-container">
55	+	<button type="button" onClick={() => sendRequest()}>
56	+	Call API
57	+	</button>
58	+	<a
59	+	className="docs-link"
60	+	target="_blank"
61	+	href="https://bhvr.dev"
62	+	rel="noopener"
63	+	>
64	+	Docs
65	+	</a>
66	+	</div>
67	+	{data && (
68	+	<pre className="response">
69	+	<code>
70	+	Message: {data.message} <br />
71	+	Success: {data.success.toString()}
72	+	</code>
73	+	</pre>
74	+	)}
75	+	</div>
76	+	</>
77	+	);
78	+	}
79	+
80	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-rpc.tsx (added) +77 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import { hcWithType } from "server/dist/client";
5	+	import "../App.css";
6	+
7	+	export const Route = createFileRoute("/")({
8	+	component: Index,
9	+	});
10	+
11	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
12	+
13	+	const client = hcWithType(SERVER_URL);
14	+
15	+	type ResponseType = Awaited<ReturnType<typeof client.hello.$get>>;
16	+
17	+	function Index() {
18	+	const [data, setData] = useState<
19	+	Awaited<ReturnType<ResponseType["json"]>> \| undefined
20	+	>();
21	+
22	+	async function sendRequest() {
23	+	try {
24	+	const res = await client.hello.$get();
25	+	if (!res.ok) {
26	+	console.log("Error fetching data");
27	+	return;
28	+	}
29	+	const data = await res.json();
30	+	setData(data);
31	+	} catch (error) {
32	+	console.log(error);
33	+	}
34	+	}
35	+
36	+	return (
37	+	<>
38	+	<div>
39	+	<a
40	+	href="https://github.com/stevedylandev/bhvr"
41	+	target="_blank"
42	+	rel="noopener"
43	+	>
44	+	<img src={beaver} className="logo" alt="beaver logo" />
45	+	</a>
46	+	</div>
47	+	<h1>bhvr</h1>
48	+	<h2>Bun + Hono + Vite + React</h2>
49	+	<p>A typesafe fullstack monorepo</p>
50	+	<div className="card">
51	+	<div className="button-container">
52	+	<button type="button" onClick={sendRequest}>
53	+	Call API
54	+	</button>
55	+	<a
56	+	className="docs-link"
57	+	target="_blank"
58	+	href="https://bhvr.dev"
59	+	rel="noopener"
60	+	>
61	+	Docs
62	+	</a>
63	+	</div>
64	+	{data && (
65	+	<pre className="response">
66	+	<code>
67	+	Message: {data.message} <br />
68	+	Success: {data.success.toString()}
69	+	</code>
70	+	</pre>
71	+	)}
72	+	</div>
73	+	</>
74	+	);
75	+	}
76	+
77	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-shadcn-tailwind-tanstackquery.tsx (added) +65 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "@/assets/beaver.svg";
4	+	import type { ApiResponse } from "shared";
5	+	import { Button } from "@/components/ui/button";
6	+	import { useMutation } from "@tanstack/react-query";
7	+
8	+	export const Route = createFileRoute("/")({
9	+	component: Index,
10	+	});
11	+
12	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
13	+
14	+	function Index() {
15	+	const [data, setData] = useState<ApiResponse \| undefined>();
16	+
17	+	const { mutate: sendRequest } = useMutation({
18	+	mutationFn: async () => {
19	+	try {
20	+	const req = await fetch(`${SERVER_URL}/hello`);
21	+	const res: ApiResponse = await req.json();
22	+	setData(res);
23	+	} catch (error) {
24	+	console.log(error);
25	+	}
26	+	},
27	+	});
28	+
29	+	return (
30	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
31	+	<a
32	+	href="https://github.com/stevedylandev/bhvr"
33	+	target="_blank"
34	+	rel="noopener"
35	+	>
36	+	<img
37	+	src={beaver}
38	+	className="w-16 h-16 cursor-pointer"
39	+	alt="beaver logo"
40	+	/>
41	+	</a>
42	+	<h1 className="text-5xl font-black">bhvr</h1>
43	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
44	+	<p>A typesafe fullstack monorepo</p>
45	+	<div className="flex items-center gap-4">
46	+	<Button onClick={() => sendRequest()}>Call API</Button>
47	+	<Button variant="secondary" asChild>
48	+	<a target="_blank" href="https://bhvr.dev" rel="noopener">
49	+	Docs
50	+	</a>
51	+	</Button>
52	+	</div>
53	+	{data && (
54	+	<pre className="bg-gray-100 p-4 rounded-md">
55	+	<code>
56	+	Message: {data.message} <br />
57	+	Success: {data.success.toString()}
58	+	</code>
59	+	</pre>
60	+	)}
61	+	</div>
62	+	);
63	+	}
64	+
65	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-tailwind-tanstackquery.tsx (added) +73 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import type { ApiResponse } from "shared";
5	+	import { useMutation } from "@tanstack/react-query";
6	+
7	+	export const Route = createFileRoute("/")({
8	+	component: Index,
9	+	});
10	+
11	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
12	+
13	+	function Index() {
14	+	const [data, setData] = useState<ApiResponse \| undefined>();
15	+
16	+	const { mutate: sendRequest } = useMutation({
17	+	mutationFn: async () => {
18	+	try {
19	+	const req = await fetch(`${SERVER_URL}/hello`);
20	+	const res: ApiResponse = await req.json();
21	+	setData(res);
22	+	} catch (error) {
23	+	console.log(error);
24	+	}
25	+	},
26	+	});
27	+
28	+	return (
29	+	<div className="max-w-xl mx-auto flex flex-col gap-6 items-center justify-center min-h-screen">
30	+	<a
31	+	href="https://github.com/stevedylandev/bhvr"
32	+	target="_blank"
33	+	rel="noopener"
34	+	>
35	+	<img
36	+	src={beaver}
37	+	className="w-16 h-16 cursor-pointer"
38	+	alt="beaver logo"
39	+	/>
40	+	</a>
41	+	<h1 className="text-5xl font-black">bhvr</h1>
42	+	<h2 className="text-2xl font-bold">Bun + Hono + Vite + React</h2>
43	+	<p>A typesafe fullstack monorepo</p>
44	+	<div className="flex items-center gap-4">
45	+	<button
46	+	type="button"
47	+	onClick={() => sendRequest()}
48	+	className="bg-black text-white px-2.5 py-1.5 rounded-md"
49	+	>
50	+	Call API
51	+	</button>
52	+	<a
53	+	target="_blank"
54	+	href="https://bhvr.dev"
55	+	className="border-1 border-black text-black px-2.5 py-1.5 rounded-md"
56	+	rel="noopener"
57	+	>
58	+	Docs
59	+	</a>
60	+	</div>
61	+	{data && (
62	+	<pre className="bg-gray-100 p-4 rounded-md">
63	+	<code>
64	+	Message: {data.message} <br />
65	+	Success: {data.success.toString()}
66	+	</code>
67	+	</pre>
68	+	)}
69	+	</div>
70	+	);
71	+	}
72	+
73	+	export default Index;

src/templates/extras/client/src/routes/index.tsx/index-with-tanstackquery.tsx (added) +67 −0

1	+	import { createFileRoute } from "@tanstack/react-router";
2	+	import { useState } from "react";
3	+	import beaver from "../assets/beaver.svg";
4	+	import { useMutation } from "@tanstack/react-query";
5	+	import type { ApiResponse } from "shared";
6	+	import "../App.css";
7	+
8	+	export const Route = createFileRoute("/")({
9	+	component: Index,
10	+	});
11	+
12	+	const SERVER_URL = import.meta.env.VITE_SERVER_URL \|\| "http://localhost:3000";
13	+
14	+	function Index() {
15	+	const [data, setData] = useState<ApiResponse \| undefined>();
16	+
17	+	const { mutate: sendRequest } = useMutation({
18	+	mutationFn: async () => {
19	+	const req = await fetch(`${SERVER_URL}/hello`);
20	+	const res: ApiResponse = await req.json();
21	+	setData(res);
22	+	},
23	+	onError: (err) => console.log(err),
24	+	});
25	+
26	+	return (
27	+	<>
28	+	<div>
29	+	<a
30	+	href="https://github.com/stevedylandev/bhvr"
31	+	target="_blank"
32	+	rel="noopener"
33	+	>
34	+	<img src={beaver} className="logo" alt="beaver logo" />
35	+	</a>
36	+	</div>
37	+	<h1>bhvr</h1>
38	+	<h2>Bun + Hono + Vite + React</h2>
39	+	<p>A typesafe fullstack monorepo</p>
40	+	<div className="card">
41	+	<div className="button-container">
42	+	<button type="button" onClick={() => sendRequest()}>
43	+	Call API
44	+	</button>
45	+	<a
46	+	className="docs-link"
47	+	target="_blank"
48	+	href="https://bhvr.dev"
49	+	rel="noopener"
50	+	>
51	+	Docs
52	+	</a>
53	+	</div>
54	+	{data && (
55	+	<pre className="response">
56	+	<code>
57	+	Message: {data.message} <br />
58	+	Success: {data.success.toString()}
59	+	</code>
60	+	</pre>
61	+	)}
62	+	</div>
63	+	</>
64	+	);
65	+	}
66	+
67	+	export default Index;