From d155350636d55d8b58bf26e870c1aa0cc7ca7348 Mon Sep 17 00:00:00 2001 From: Francisco Pessano Date: Sun, 2 Jul 2023 23:17:04 -0300 Subject: [PATCH] feat: trpc integration --- .DS_Store | Bin 8196 -> 8196 bytes .eslintrc.cjs | 1 + packages/client/next-env.d.ts | 1 - packages/client/package.json | 2 +- .../screens/SpendScreen/SpendScreen.tsx | 20 +++++++++++++++++- packages/client/trpc.ts | 12 +++++++++++ packages/client/tsconfig.json | 7 +++--- packages/server/{index.ts => app.ts} | 7 ++++-- packages/server/db.ts | 2 +- packages/server/nodemon.json | 5 +++++ packages/server/package.json | 15 +++++++++---- packages/server/tsconfig.json | 4 ++-- 12 files changed, 61 insertions(+), 15 deletions(-) create mode 100644 packages/client/trpc.ts rename packages/server/{index.ts => app.ts} (94%) create mode 100644 packages/server/nodemon.json diff --git a/.DS_Store b/.DS_Store index 09bcf48e3c56a5c2f60ea4cff4da8bcb67c0db82..cf580a2fa517bc9ab4c8daa03b598d5220d98913 100644 GIT binary patch literal 8196 zcmeHM%We}f6uoXs9%>8WB^3#zk%|P1QkphYst{5LVZpXRAOt8RnV}7xjH5gnRaGGy zHoyn4V#S^X8~6ZzffZ84XRv~E?P-{C64(`_+S2$=#`pTz$H$(rLqwv`b+bfsM3lnC zHZzTEMB;M3hSEg%QIYnv^eB#A6Nz~1C{~HfMvik@INqscQ&WgnD@Re zwYg=$GH@gr;Pt`5#Wo+>zP4)VK&G|;uv2)f67I1NP%%zu^P%l)t3pwy-aUvgRD@d$ zp~F$`usdu%w0&)LI0+q2B19J94n-(*#5u~HL|$8)TLvrx!wm4=eHOcQkJ{wN_U|=% zM(sPktW|wkg%>84cn$mRr%I}-1R^)7i`XsNF?_k^#fUGX93ZrDN>HH|LleVPF-P(xtEe=y=t zBA)xUgPwYW-u|Hm0hVGdNTP;q)KLSPYqnSMALTRwKjzfqa~Gp+Z^6usNZ(?<)n2<9 zj_apt)33KXOG{tH#N^bmL^7F9PA4CiHf68WsdT#SLZ$VPf8CYRuO8f2s`u(%ubeq^ zO9q`vJ@8s8pzeBbd33)XxUyG}-N0?D*pe4-9r_Rn_y}n-F@*9DCh4v$faKVR4yy8cE!AYB$!_Oge0y(}H)OFG_Br+7 z^riimm%m{A<8?Ho`&Xal=5L(&eFYb5$9Aa|_%dK+a@$W~93{qSOKI_n8rcRkDly6) zMtcXk_Tyv6;~Z1PjM6XkKxKHdGP+7(=KSQD6V=BIa4HI0&$dOL(}*{8ED#sNOBrzn zj+%8*oP_F23(CcOi}!`+80BI*~5gmR$bRC`>=rGGV%x16UAjDkG5F!f=X{-?6 zpfE;2RER3nD31#90c*DOZ3HK-9jL{IC?n^N19}MqBf57?{+sbJMW5$DjZIo5opG%YbFzP#6$X z#Zs{VsDn=}6P5Sc4z4G-II&+}TNQ##ZO38Nb{ux_hav7AxN=NBw0&*y1nJNZ0{8<} Se}~%lKj^pbe delta 435 zcmZp1XmOa}FDk*nz`)4BAi%(o%82Hwr=94s7>AQc=8dJIVn zi9n2`Dk&#F2`C5D${Yfu_5Onakj22j0#u*MkjGF4G7U-HA!K!vc?5JF^?)Mt&~&CV zWHOYX>SUaQtP{xQ0@?spH~F1_6cgi|$yNedOiWyp(*!IGn7GgkWd$nE13IVz-B_jy zkg=052w1Q&Jp*Z)%qM8Y2KLUp$$o-1Y|J1R&zn3!P(uW)0NIml49=6!2x>C|Ng;V4 z`9???ND2rmD>?&%G7}sCB?TFV!O8i#1wdmMl<$KnHiqEIAtKt0!IK+At^mnUQF$O) gDyj@5XM)MSV3E6`5}Pmcm@sc /// diff --git a/packages/client/package.json b/packages/client/package.json index 1741e63..6b7dd39 100644 --- a/packages/client/package.json +++ b/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", diff --git a/packages/client/screens/SpendScreen/SpendScreen.tsx b/packages/client/screens/SpendScreen/SpendScreen.tsx index 297ec0e..72c89d7 100644 --- a/packages/client/screens/SpendScreen/SpendScreen.tsx +++ b/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 ( diff --git a/packages/client/trpc.ts b/packages/client/trpc.ts new file mode 100644 index 0000000..0538787 --- /dev/null +++ b/packages/client/trpc.ts @@ -0,0 +1,12 @@ +import { createTRPCProxyClient, httpBatchLink } from '@trpc/client'; +import type { AppRouter } from 'server/app'; + +export const trpc = createTRPCProxyClient({ + links: [ + httpBatchLink({ + url: 'http://localhost:3000', + }), + ], +}); + +export default trpc; diff --git a/packages/client/tsconfig.json b/packages/client/tsconfig.json index 6bfd9af..803bb3e 100644 --- a/packages/client/tsconfig.json +++ b/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"] } diff --git a/packages/server/index.ts b/packages/server/app.ts similarity index 94% rename from packages/server/index.ts rename to packages/server/app.ts index 5899aff..3a4f5b2 100644 --- a/packages/server/index.ts +++ b/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; diff --git a/packages/server/db.ts b/packages/server/db.ts index 6814cbf..bb16109 100644 --- a/packages/server/db.ts +++ b/packages/server/db.ts @@ -1,4 +1,4 @@ -interface User { +export interface User { id: string; name: string; } diff --git a/packages/server/nodemon.json b/packages/server/nodemon.json new file mode 100644 index 0000000..314102f --- /dev/null +++ b/packages/server/nodemon.json @@ -0,0 +1,5 @@ +{ + "watch": "**/*", + "ext": "ts, json", + "exec": "ts-node app.ts" +} diff --git a/packages/server/package.json b/packages/server/package.json index b4a2fa3..7f67775 100644 --- a/packages/server/package.json +++ b/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" + } } diff --git a/packages/server/tsconfig.json b/packages/server/tsconfig.json index 67668e5..709cf1e 100644 --- a/packages/server/tsconfig.json +++ b/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": ["./*"] }