feat: trpc integration

.eslintrc.cjs

@@ -13,6 +13,7 @@ module.exports = {
   plugins: ['react', 'prettier', 'sort-keys-fix', 'better-styled-components'],
   rules: {
     '@typescript-eslint/strict-boolean-expressions': 'off',
+    '@typescript-eslint/triple-slash-reference': 'off',
     'arrow-body-style': ['error', 'as-needed'],
     'better-styled-components/sort-declarations-alphabetically': 2,
     'import/order': [

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"]
 }

packages/server/app.ts

@@ -1,7 +1,9 @@
 import { z } from 'zod';
 import { createHTTPServer } from '@trpc/server/adapters/standalone';
+import cors from 'cors';
 import { db } from './db';
 import { publicProcedure, router } from './trpc';
+
 const appRouter = router({
   userById: publicProcedure.input(z.string()).query(async (opts) => {
     const { input } = opts;
@@ -18,10 +20,11 @@ const appRouter = router({
   }),
 });
 
+export type AppRouter = typeof appRouter;
+
 const server = createHTTPServer({
+  middleware: cors(),
   router: appRouter,
 });
 
 server.listen(3000);
-
-export type AppRouter = typeof appRouter;

packages/server/db.ts

@@ -1,4 +1,4 @@
-interface User {
+export interface User {
   id: string;
   name: string;
 }

packages/server/nodemon.json

@@ -0,0 +1,5 @@
+{
+  "watch": "**/*",
+  "ext": "ts, json",
+  "exec": "ts-node app.ts"
+}

packages/server/package.json

@@ -1,13 +1,20 @@
 {
-  "name": "@monorepo/server",
+  "name": "server",
   "version": "1.0.0",
   "description": "",
   "main": "index.js",
-  "devDependencies": {},
+  "devDependencies": {
+    "nodemon": "^2.0.22"
+  },
   "scripts": {
-    "dev": "echo 'abc'",
+    "dev": "nodemon app.ts",
     "build": "tsc --build"
   },
   "author": "",
-  "license": "ISC"
+  "license": "ISC",
+  "dependencies": {
+    "@types/cors": "^2.8.13",
+    "cors": "^2.8.5",
+    "ts-node": "^10.9.1"
+  }
 }

packages/server/tsconfig.json

@@ -27,7 +27,7 @@
 
     /* Modules */
     "module": "commonjs" /* Specify what module code is generated. */,
-    // "rootDir": "./",                                  /* Specify the root folder within your source files. */
+    "rootDir": "./" /* Specify the root folder within your source files. */,
     // "moduleResolution": "node10",                     /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */
@@ -107,5 +107,5 @@
     // "skipDefaultLibCheck": true,                      /* Skip type checking .d.ts files that are included with TypeScript. */
     "skipLibCheck": true /* Skip type checking all .d.ts files. */
   },
-  "include": ["*"]
+  "include": ["./*"]
 }