feat: trpc integration

packages/client/next-env.d.ts

@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/triple-slash-reference */
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
 

packages/client/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "scripts": {
-    "dev": "next dev",
+    "dev": "next dev -p 8080",
     "build": "next build",
     "start": "next start",
     "lint": "next lint",

packages/client/screens/SpendScreen/SpendScreen.tsx

@@ -1,9 +1,10 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import styled from 'styled-components';
 import { PieCircle } from '@/components';
 import { type Theme } from '@/lib/theme';
 import { useAppStore } from '@/lib/storage';
 import { type PieCircleData } from '@/lib/types';
+import { trpc } from '../../trpc';
 
 export const SpendScreen = (): JSX.Element => {
   const userSpendData = useAppStore((state) => state.userSpendData);
@@ -16,6 +17,23 @@ export const SpendScreen = (): JSX.Element => {
     [key, values.reduce((acc: number, { value }: { value: number }) => acc + value, 0)],
     { backgroundColor: values[0].category.backgroundColor, label: values[0].category.label },
   ]);
+  useEffect(() => {
+    trpc.userCreate
+      .mutate({ name: 'ABC' })
+      .then(() => {
+        trpc.userList
+          .query()
+          .then((a) => {
+            console.log(a);
+          })
+          .catch((e) => {
+            console.log(e);
+          });
+      })
+      .catch((e) => {
+        console.log(e);
+      });
+  }, []);
   return (
     <SpendScreenContainer>
       <PieCircle pieCircleData={combinedUserData} />

packages/client/trpc.ts

@@ -0,0 +1,12 @@
+import { createTRPCProxyClient, httpBatchLink } from '@trpc/client';
+import type { AppRouter } from 'server/app';
+
+export const trpc = createTRPCProxyClient<AppRouter>({
+  links: [
+    httpBatchLink({
+      url: 'http://localhost:3000',
+    }),
+  ],
+});
+
+export default trpc;

packages/client/tsconfig.json

@@ -1,7 +1,8 @@
 {
   "extends": "../../tsconfig.json",
-  "files": [],
+  "files": ["../server/app.ts"],
   "compilerOptions": {
+    "rootDir": "../",
     "composite": true,
     "target": "ESNext",
     "useDefineForClassFields": true,
@@ -23,11 +24,11 @@
       "@/*": ["./*"]
     }
   },
-  "include": ["next-env.d.ts", "pages", "components", "screens", "lib"],
+  "include": ["next-env.d.ts", "pages", "components", "screens", "lib", "./*"],
   "references": [
     {
       "path": "./tsconfig.node.json"
     }
   ],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "../server/app.ts"]
 }