app: Base working tRPC router and env

busybox11 · Aug 14, 2024 · 8308635 · 8308635
1 parent 72c8b1d
commit 8308635
Show file tree

Hide file tree

Showing 22 changed files with 625 additions and 55 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -2,7 +2,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   ignorePatterns: ["apps/**", "packages/**"],
-  extends: ["@repo/eslint-config/library.js"],
+  extends: ["@nowplaying/eslint-config/library.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,

diff --git a/apps/api/package.json b/apps/api/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "api",
+  "name": "@nowplaying/api",
   "version": "1.0.0",
   "description": "",
   "main": "src/index.ts",
@@ -15,13 +15,16 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@trpc/server": "^10.45.2",
+    "@trpc/server": "11.0.0-rc.477",
+    "@types/cors": "^2.8.17",
+    "cors": "^2.8.5",
     "express": "^4.19.2",
+    "superjson": "^2.2.1",
     "zod": "^3.23.8"
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:^",
-    "@repo/typescript-config": "workspace:^",
+    "@nowplaying/eslint-config": "workspace:^",
+    "@nowplaying/typescript-config": "workspace:^",
     "@types/express": "^4.17.21",
     "@types/node": "^20.11.24",
     "eslint": "^8.57.0",

diff --git a/apps/api/src/context.ts b/apps/api/src/context.ts
@@ -1,11 +1,11 @@
-import type { CreateFastifyContextOptions } from "@trpc/server/adapters/fastify";
+import { CreateExpressContextOptions } from "@trpc/server/adapters/express";
 
 export async function createContextInner() {
   return {};
 }
 
-export async function createContext({ req, res }: CreateFastifyContextOptions) {
-  const server = req.server;
+export async function createContext({ req, res }: CreateExpressContextOptions) {
+  const server = {};
 
   return {
     server,

diff --git a/apps/api/src/index.ts b/apps/api/src/index.ts
@@ -2,10 +2,12 @@ import express from "express";
 import * as trpcExpress from "@trpc/server/adapters/express";
 import { appRouter } from "./router";
 import { createContext } from "./context";
+import cors from "cors";
 
 const app = express();
+app.use(cors());
 
-app.get("/", (req, res) => {
+app.get("/", (_req, res) => {
   res.send("Hello World!");
 });
 

diff --git a/apps/api/src/router.ts b/apps/api/src/router.ts
@@ -1,11 +1,18 @@
 import { initTRPC } from "@trpc/server";
 import type { Context } from "./context";
 
-const t = initTRPC.context<Context>().create();
+import SuperJSON from "superjson";
+
+const t = initTRPC.context<Context>().create({
+  transformer: SuperJSON,
+  errorFormatter({ shape }) {
+    return shape;
+  },
+});
 
 export const appRouter = t.router({
-  hello: t.procedure.query(({ ctx }) => {
-    return ctx.server.info;
+  hello: t.procedure.query(() => {
+    return "world";
   }),
 });
 export type AppRouter = typeof appRouter;
diff --git a/apps/api/src/types.ts b/apps/api/src/types.ts
@@ -0,0 +1 @@
+export type { AppRouter } from "./router";
diff --git a/apps/api/tsconfig.json b/apps/api/tsconfig.json
@@ -0,0 +1,12 @@
+{
+  "extends": "@nowplaying/typescript-config/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@api/*": ["./src/*"]
+    },
+    "outDir": "dist"
+  },
+  "include": ["./src/**/*.ts", "./src/**/*.tsx"],
+  "exclude": ["node_modules"]
+}
diff --git a/apps/web/.eslintrc.js b/apps/web/.eslintrc.js
@@ -1,7 +1,7 @@
 /** @type {import("eslint").Linter.Config} */
 module.exports = {
   root: true,
-  extends: ["@repo/eslint-config/next.js"],
+  extends: ["@nowplaying/eslint-config/next.js"],
   parser: "@typescript-eslint/parser",
   parserOptions: {
     project: true,

diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx
@@ -14,7 +14,7 @@ export default function RootLayout({
   children,
 }: {
   children: React.ReactNode;
-}): JSX.Element {
+}) {
   return (
     <html lang="en" className="bg-background text-white">
       <link rel="icon" type="image/png" href="/favicon.png" />

diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx
@@ -1,7 +1,8 @@
 import Locales from "@/components/Home/Locales";
+import TestTrpc from "@/components/TestTrpc";
 import Image from "next/image";
 
-export default function Page(): JSX.Element {
+export default function Page() {
   return (
     <main className="flex flex-col h-screen px-4 py-auto gap-8 items-center justify-center text-center">
       <div className="flex flex-col items-center justify-center">
@@ -89,6 +90,8 @@ export default function Page(): JSX.Element {
         By clicking on 'LOGIN TO SPOTIFY', you accept the use of cookies
         necessary for the proper functioning of the site.
       </h6>
+
+      <TestTrpc />
     </main>
   );
 }
diff --git a/apps/web/components/TestTrpc.tsx b/apps/web/components/TestTrpc.tsx
@@ -0,0 +1,18 @@
+"use client";
+
+import { trpc } from "@/utils/trpc";
+
+function TestTrpc() {
+  const trpcHello = trpc.hello.useQuery();
+
+  if (trpcHello.data) {
+    return <div>{trpcHello.data}</div>;
+  }
+
+  if (trpcHello.error) {
+    return <div>{trpcHello.error.message}</div>;
+  }
+
+  return <div>Loading...</div>;
+}
+export default trpc.withTRPC(TestTrpc);
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -1,6 +1,6 @@
 /** @type {import('next').NextConfig} */
 module.exports = {
-  transpilePackages: ["@repo/ui"],
+  transpilePackages: ["@nowplaying/ui"],
 
   async redirects() {
     // Remove .php extension

diff --git a/apps/web/package.json b/apps/web/package.json
@@ -1,29 +1,38 @@
 {
-  "name": "web",
+  "name": "@nowplaying/web",
   "version": "1.0.0",
   "private": true,
+  "main": "src/server.ts",
+  "types": "src/server.ts",
   "scripts": {
     "dev": "next dev",
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --max-warnings 0"
   },
   "dependencies": {
+    "@nowplaying/api": "workspace:^",
+    "@trpc/client": "11.0.0-rc.477",
+    "@trpc/next": "11.0.0-rc.477",
+    "@trpc/react-query": "11.0.0-rc.477",
+    "@trpc/server": "11.0.0-rc.477",
     "next": "^14.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "superjson": "^2.2.1",
     "usehooks-ts": "^3.1.0"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.1",
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
+    "@nowplaying/eslint-config": "workspace:*",
+    "@nowplaying/typescript-config": "workspace:*",
     "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.24",
     "@types/react": "^18.2.61",
     "@types/react-dom": "^18.2.19",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
+    "fastify": "^4.28.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.3.3"

diff --git a/apps/web/tsconfig.json b/apps/web/tsconfig.json
@@ -1,5 +1,5 @@
 {
-  "extends": "@repo/typescript-config/nextjs.json",
+  "extends": "@nowplaying/typescript-config/nextjs.json",
   "compilerOptions": {
     "plugins": [
       {

diff --git a/apps/web/utils/trpc.ts b/apps/web/utils/trpc.ts
@@ -0,0 +1,61 @@
+import type { AppRouter } from "@nowplaying/api/src/types";
+
+import { httpBatchLink, loggerLink } from "@trpc/client";
+import { createTRPCNext } from "@trpc/next";
+import type { inferRouterInputs, inferRouterOutputs } from "@trpc/server";
+import type _fastify from "fastify";
+import superjson from "superjson";
+
+function getBaseUrl() {
+  return process.env.NODE_ENV === "development"
+    ? "http://localhost:4000"
+    : "https://trpc.nowplayi.ng";
+}
+
+function getHeaders() {
+  const baseHeaders = {
+    "Access-Control-Allow-Origin": "*",
+  } as Record<string, string>;
+
+  return baseHeaders;
+}
+
+export const trpc = createTRPCNext<AppRouter>({
+  config({ ctx: _ctx }) {
+    return {
+      queryClientConfig: {
+        defaultOptions: {
+          queries: {
+            refetchOnWindowFocus: false,
+          },
+        },
+      },
+      links: [
+        loggerLink({
+          enabled: (opts) =>
+            process.env.NODE_ENV === "development" ||
+            (opts.direction === "down" && opts.result instanceof Error),
+        }),
+        httpBatchLink({
+          transformer: superjson,
+          url: `${getBaseUrl()}/trpc`,
+          fetch: (url, options) => {
+            const headers = getHeaders();
+            return fetch(url, {
+              ...options,
+              headers: {
+                ...options?.headers,
+                ...headers,
+              },
+            });
+          },
+        }),
+      ],
+    };
+  },
+  transformer: superjson,
+  ssr: false,
+});
+
+export type RouterInputs = inferRouterInputs<AppRouter>;
+export type RouterOutputs = inferRouterOutputs<AppRouter>;
diff --git a/package.json b/package.json
@@ -8,13 +8,13 @@
     "format": "prettier --write \"**/*.{ts,tsx,md}\""
   },
   "devDependencies": {
-    "@repo/eslint-config": "workspace:*",
-    "@repo/typescript-config": "workspace:*",
+    "@nowplaying/eslint-config": "workspace:*",
+    "@nowplaying/typescript-config": "workspace:*",
     "prettier": "^3.2.5",
     "turbo": "^2.0.3"
   },
   "packageManager": "pnpm@8.12.1",
   "engines": {
     "node": ">=18"
   }
-}
+}
diff --git a/packages/eslint-config/package.json b/packages/eslint-config/package.json
@@ -1,5 +1,5 @@
 {
-  "name": "@repo/eslint-config",
+  "name": "@nowplaying/eslint-config",
   "version": "0.0.0",
   "private": true,
   "files": [
@@ -16,4 +16,4 @@
     "@typescript-eslint/eslint-plugin": "^7.1.0",
     "typescript": "^5.3.3"
   }
-}
+}
diff --git a/packages/typescript-config/base.json b/packages/typescript-config/base.json
@@ -2,19 +2,28 @@
   "$schema": "https://json.schemastore.org/tsconfig",
   "display": "Default",
   "compilerOptions": {
-    "declaration": true,
-    "declarationMap": true,
+    "allowJs": false,
+    "checkJs": false,
     "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "declaration": false,
     "incremental": false,
     "isolatedModules": true,
-    "lib": ["es2022", "DOM", "DOM.Iterable"],
-    "module": "NodeNext",
-    "moduleDetection": "force",
-    "moduleResolution": "NodeNext",
+    "lib": [
+      "ESNext",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ES2022",
+    "moduleDetection": "auto",
+    "moduleResolution": "Node",
     "noUncheckedIndexedAccess": true,
     "resolveJsonModule": true,
+    "noUnusedParameters": true,
+    "noUnusedLocals": true,
     "skipLibCheck": true,
     "strict": true,
-    "target": "ES2022"
+    "target": "ES2022",
+    "noEmit": true
   }
-}
+}
diff --git a/packages/typescript-config/nextjs.json b/packages/typescript-config/nextjs.json
@@ -3,11 +3,16 @@
   "display": "Next.js",
   "extends": "./base.json",
   "compilerOptions": {
-    "plugins": [{ "name": "next" }],
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
     "module": "ESNext",
     "moduleResolution": "Bundler",
+    "esModuleInterop": true,
     "allowJs": true,
     "jsx": "preserve",
     "noEmit": true
   }
-}
+}
diff --git a/packages/typescript-config/package.json b/packages/typescript-config/package.json
@@ -1,9 +1,9 @@
 {
-  "name": "@repo/typescript-config",
+  "name": "@nowplaying/typescript-config",
   "version": "0.0.0",
   "private": true,
   "license": "MIT",
   "publishConfig": {
     "access": "public"
   }
-}
+}