feature(client): setup tRPC in front-end (#15)

* fix(server): update import path for fetchExternalData

* wip

* feature(client): set-up `tRPC` in front-end

client/.env.example

@@ -0,0 +1 @@
+VITE_API_URL = http://localhost:3000

client/src/main.tsx

@@ -1,9 +1,26 @@
 import App from './app.tsx';
 import { StrictMode } from 'react';
+import { trpc } from './utils/trpc.ts';
 import { createRoot } from 'react-dom/client';
+import { httpBatchLink } from '@trpc/react-query';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+
+const queryClient = new QueryClient();
+
+const trpcClient = trpc.createClient({
+	links: [
+		httpBatchLink({
+			url: import.meta.env.VITE_API_URL,
+		}),
+	],
+});
 
 createRoot(document.getElementById('root')!).render(
 	<StrictMode>
-		<App />
+		<trpc.Provider client={ trpcClient } queryClient={ queryClient }>
+			<QueryClientProvider client={ queryClient }>
+				<App />
+			</QueryClientProvider>
+		</trpc.Provider>
 	</StrictMode>
 );

client/src/utils/trpc.ts

@@ -0,0 +1,4 @@
+import type { AppRouter } from '@server/index.ts';
+import { createTRPCReact } from '@trpc/react-query';
+
+export const trpc = createTRPCReact<AppRouter>();

server/index.ts

@@ -18,7 +18,9 @@ const appRouter = router({
 
 const server = createHTTPServer({
 	router: appRouter,
-	middleware: cors(),
+	middleware: cors({ origin: '*' }),
 });
 
-server.listen(process.env.PORT || 3001);
+server.listen(process.env.PORT || 3000, () => {
+	console.log(`🚀 Server ready at http://localhost:${ process.env.PORT || 3000 }`);
+});

server/utils/fetchers/fetchers.ts

@@ -1,4 +1,4 @@
-import fetchExternalData from '../../fetch-external-data';
+import fetchExternalData from './fetch-external-data';
 
 type ExternalSearchResponse = Array<{
     id: number;