add

apps/web/app/page.tsx

@@ -1,5 +1,46 @@
-export default async function Home() {
-	return <div>
-		
-	</div>;
+'use client';
+
+import { api } from '@repo/client';
+import { Button } from '@repo/ui/components/button';
+import { useState } from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { httpBatchLink } from '@trpc/client';
+
+function HomeContent() {
+	const [name, setName] = useState('');
+	const helloQuery = api.hello.useQuery(name || undefined);
+
+	return (
+		<div className="p-4">
+			<input
+				type="text"
+				value={name}
+				onChange={(e) => setName(e.target.value)}
+				placeholder="输入名字"
+				className="border p-2 mr-2"
+			/>
+			<Button onClick={() => helloQuery.refetch()}>{helloQuery.isLoading ? '加载中...' : helloQuery.data}</Button>
+		</div>
+	);
+}
+
+export default function Home() {
+	const [queryClient] = useState(() => new QueryClient());
+	const [trpcClient] = useState(() =>
+		api.createClient({
+			links: [
+				httpBatchLink({
+					url: 'http://localhost:3000/api/trpc',
+				}),
+			],
+		}),
+	);
+
+	return (
+		<QueryClientProvider client={queryClient}>
+			<api.Provider client={trpcClient} queryClient={queryClient}>
+				<HomeContent />
+			</api.Provider>
+		</QueryClientProvider>
+	);
 }

packages/client/src/api/hooks/index.ts

@@ -1,2 +1,2 @@
-
-export * from "./useEntity"
+export * from './useEntity';
+export * from './useHello';

packages/client/src/api/hooks/useHello.ts

@@ -0,0 +1,7 @@
+import { api } from '../trpc';
+
+export function useHello() {
+	return {
+		hello: api.hello,
+	};
+}

packages/client/src/api/trpc.ts

@@ -1,8 +1,8 @@
-import { AppRouter } from "@repo/backend/trpc"
-import { inferReactQueryProcedureOptions } from "@trpc/react-query";
-import { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import { AppRouter } from '@repo/backend/trpc';
+import { inferReactQueryProcedureOptions } from '@trpc/react-query';
+import { inferRouterInputs, inferRouterOutputs } from '@trpc/server';
 import { createTRPCContext } from '@trpc/tanstack-react-query';
 export type ReactQueryOptions = inferReactQueryProcedureOptions<AppRouter>;
 export type RouterInputs = inferRouterInputs<AppRouter>;
 export type RouterOutputs = inferRouterOutputs<AppRouter>;
-export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();
+export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();

packages/client/src/index.ts

@@ -1 +1 @@
-export * from "./api"
+export * from './api';