From 18067770083e0c28c4df5a13e4512309b7f4768b Mon Sep 17 00:00:00 2001
From: Ido Bouskila <94786579+IdoBouskila@users.noreply.github.com>
Date: Fri, 29 Nov 2024 15:28:00 +0200
Subject: [PATCH]  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                           |  1 +
 client/src/main.tsx                           | 19 ++++++++++++++++++-
 client/src/utils/trpc.ts                      |  4 ++++
 server/index.ts                               |  6 ++++--
 .../fetchers}/fetch-external-data.ts          |  0
 server/utils/fetchers/fetchers.ts             |  2 +-
 6 files changed, 28 insertions(+), 4 deletions(-)
 create mode 100644 client/.env.example
 create mode 100644 client/src/utils/trpc.ts
 rename server/{ => utils/fetchers}/fetch-external-data.ts (100%)

diff --git a/client/.env.example b/client/.env.example
new file mode 100644
index 0000000..345a9b1
--- /dev/null
+++ b/client/.env.example
@@ -0,0 +1 @@
+VITE_API_URL = http://localhost:3000
\ No newline at end of file
diff --git a/client/src/main.tsx b/client/src/main.tsx
index 3fde218..4494b8e 100644
--- a/client/src/main.tsx
+++ b/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>
 );
diff --git a/client/src/utils/trpc.ts b/client/src/utils/trpc.ts
new file mode 100644
index 0000000..d011b58
--- /dev/null
+++ b/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>();
diff --git a/server/index.ts b/server/index.ts
index 4381470..3e570a1 100644
--- a/server/index.ts
+++ b/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 }`);
+});
diff --git a/server/fetch-external-data.ts b/server/utils/fetchers/fetch-external-data.ts
similarity index 100%
rename from server/fetch-external-data.ts
rename to server/utils/fetchers/fetch-external-data.ts
diff --git a/server/utils/fetchers/fetchers.ts b/server/utils/fetchers/fetchers.ts
index 3e64484..2d73c60 100644
--- a/server/utils/fetchers/fetchers.ts
+++ b/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;