feat: initialises trpc api package (#110)

.prettierignore

@@ -2,4 +2,6 @@ pnpm-lock.yaml
 .next
 coverage
 storybook-static
-dist
+dist
+playwright-report
+test-results

.vscode/settings.json

@@ -12,18 +12,18 @@
  },
  "editor.formatOnSave": true,
  "files.exclude": {
- "**/.git": true,
- "**/.svn": true,
- "**/.hg": true,
- "**/CVS": true,
- "**/.DS_Store": true,
- "**/Thumbs.db": true,
- "**/.next": true,
- "**/node_modules": true,
- "**/dist": true,
- "**/coverage": true,
- "**/playwright-report": true,
- "**/test-results": true,
- "**/*.tsbuildinfo": true
+ "**/.git": false,
+ "**/.svn": false,
+ "**/.hg": false,
+ "**/CVS": false,
+ "**/.DS_Store": false,
+ "**/Thumbs.db": false,
+ "**/.next": false,
+ "**/node_modules": false,
+ "**/dist": false,
+ "**/coverage": false,
+ "**/playwright-report": false,
+ "**/test-results": false,
+ "**/*.tsbuildinfo": false
  }
 }

apps/web/package.json

@@ -13,7 +13,7 @@
  "e2e:debug": "playwright test --debug",
  "e2e:report": "playwright show-report",
  "e2e:ui": "playwright test --ui",
- "lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
+ "lint": "next lint",
  "lint:fix": "pnpm run lint --fix",
  "start": "next start",
  "test": "vitest run",
@@ -23,24 +23,30 @@
  "typecheck": "tsc --noEmit"
  },
  "dependencies": {
+ "@noodle/api": "workspace:^",
  "@noodle/ui": "workspace:^",
- "next": "13.4.6",
+ "@tanstack/react-query": "^4.29.17",
+ "@trpc/client": "^10.32.0",
+ "@trpc/next": "^10.32.0",
+ "@trpc/react-query": "^10.32.0",
+ "@trpc/server": "^10.32.0",
+ "next": "13.4.7",
  "next-themes": "^0.2.1",
  "react": "18.2.0",
- "react-dom": "18.2.0"
+ "react-dom": "18.2.0",
+ "superjson": "^1.12.3",
+ "zod": "^3.21.4"
  },
  "devDependencies": {
  "@noodle/tailwind": "workspace:^",
+ "@noodle/test-utils": "workspace:^",
  "@noodle/tsconfig": "workspace:^",
  "@noodle/vitest": "workspace:^",
  "@playwright/test": "^1.35.1",
  "@testing-library/dom": "^9.3.1",
- "@testing-library/jest-dom": "^5.16.5",
- "@testing-library/react": "^14.0.0",
  "@testing-library/user-event": "^14.4.3",
- "@types/react": "18.2.12",
- "@types/react-dom": "18.2.5",
- "@types/testing-library__jest-dom": "^5.14.6",
+ "@types/react": "18.2.14",
+ "@types/react-dom": "18.2.6",
  "@vitest/coverage-v8": "^0.32.2",
  "autoprefixer": "^10.4.14",
  "dotenv": "^16.3.1",

apps/web/src/components/Greeting.tsx

@@ -0,0 +1,12 @@
+import { api } from '@/utils/api';
+
+export const Greeting = () => {
+ const { data, isLoading, error } = api.greeting.hello.useQuery({
+ name: 'John Doe',
+ });
+
+ if (isLoading) return <p>Loading...</p>;
+ if (error) return <p>{error.message}</p>;
+
+ return <p>{data.message}</p>;
+};

apps/web/src/pages/_app.tsx

@@ -3,6 +3,8 @@ import { type AppProps } from 'next/app';
 
 import '@/styles/globals.css';
 
+import { api } from '@/utils/api';
+
 const App = ({ Component, pageProps }: AppProps) => {
  return (
  <ThemeProvider attribute="class">
@@ -11,4 +13,4 @@ const App = ({ Component, pageProps }: AppProps) => {
  );
 };
 
-export default App;
+export default api.withTRPC(App);

apps/web/src/pages/api/trpc/[trpc].ts

@@ -0,0 +1,8 @@
+import { createNextApiHandler } from '@trpc/server/adapters/next';
+
+import { appRouter, createContext } from '@noodle/api';
+
+export default createNextApiHandler({
+ router: appRouter,
+ createContext,
+});

apps/web/src/pages/index.tsx

@@ -2,10 +2,13 @@ import { type NextPage } from 'next';
 
 import { Typography } from '@noodle/ui';
 
+import { Greeting } from '@/components/Greeting';
+
 const Home: NextPage = () => {
  return (
  <main>
  <h1>Home page</h1>
+ <Greeting />
  <Typography />
  </main>
  );

apps/web/src/tests/home.spec.tsx

@@ -1,11 +1,11 @@
-import { render, screen } from '@testing-library/react';
+import { render, screen } from '@noodle/test-utils/renderer';
 
 import Home from '@/pages/index';
 
 describe('Home page', () => {
- it('should render the home page', () => {
+ it('should render the home page', async () => {
  render(<Home />);
 
- expect(screen.getByText(/home page/i)).toBeInTheDocument();
+ expect(await screen.findByText(/hello john doe/i)).toBeInTheDocument();
  });
 });

apps/web/src/utils/api.ts

@@ -0,0 +1,21 @@
+import { httpBatchLink } from '@trpc/client';
+import { createTRPCNext } from '@trpc/next';
+import SuperJSON from 'superjson';
+
+import { type AppRouter } from '@noodle/api';
+
+import { getBaseUrl } from './getBaseUrl';
+
+export const api = createTRPCNext<AppRouter>({
+ config() {
+ return {
+ transformer: SuperJSON,
+ links: [
+ httpBatchLink({
+ url: `${getBaseUrl()}/api/trpc`,
+ }),
+ ],
+ };
+ },
+ ssr: false,
+});

apps/web/src/utils/getBaseUrl.ts

@@ -0,0 +1,5 @@
+export const getBaseUrl = () => {
+ if (typeof window !== 'undefined') return '';
+ if (process.env['VERCEL_URL']) return `https://${process.env['VERCEL_URL']}`;
+ return `http://localhost:${process.env['PORT'] ?? 3000}`;
+};

apps/web/tsconfig.json

@@ -1,7 +1,7 @@
 {
  "extends": "@noodle/tsconfig/nextjs.json",
  "compilerOptions": {
- "types": ["vitest/globals"],
+ "types": ["vitest/globals", "@noodle/test-utils/setup"],
  "paths": {
  "@/*": ["./src/*"]
  }
@@ -12,8 +12,7 @@
  "**/*.tsx",
  "**/*.cjs",
  "**/*.js",
- "./.eslintrc.cjs",
- "./vitest.setup.ts"
+ ".eslintrc.cjs"
  ],
  "exclude": ["node_modules", "./postcss.config.cjs", "./coverage/**/*"]
 }

apps/web/vitest.config.ts

@@ -4,7 +4,10 @@ import { mergeConfig, reactConfig } from '@noodle/vitest';
 
 export default mergeConfig(reactConfig, {
  test: {
- setupFiles: ['./vitest.setup.ts'],
+ setupFiles: ['@noodle/test-utils/setup'],
  exclude: [...defaultExclude, '**/e2e/**/*'],
+ coverage: {
+ exclude: [...defaultExclude, '**/utils/**/*'],
+ },
  },
 });

package.json

@@ -26,8 +26,8 @@
  "typecheck": "pnpm nx run-many -t typecheck"
  },
  "devDependencies": {
- "@commitlint/cli": "^17.6.5",
- "@commitlint/config-conventional": "^17.6.5",
+ "@commitlint/cli": "^17.6.6",
+ "@commitlint/config-conventional": "^17.6.6",
  "@ianvs/prettier-plugin-sort-imports": "^4.0.2",
  "@noodle/tsconfig": "workspace:^",
  "@types/eslint": "^8.40.2",

packages/api/package.json

@@ -0,0 +1,48 @@
+{
+ "name": "@noodle/api",
+ "version": "0.1.0",
+ "private": true,
+ "description": "Noodle's tRPC API",
+ "license": "AGPL-3.0",
+ "author": "Ahmed Elsakaan",
+ "type": "module",
+ "exports": {
+ ".": "./dist/index.js"
+ },
+ "main": "./dist/index.js",
+ "typesVersions": {
+ "*": {
+ ".": [
+ "./dist/index.d.ts"
+ ]
+ }
+ },
+ "files": [
+ "dist"
+ ],
+ "scripts": {
+ "build": "tsc -p tsconfig.build.json",
+ "dev": "pnpm run build --watch",
+ "lint": "eslint . --max-warnings 0 --report-unused-disable-directives",
+ "lint:fix": "pnpm run lint --fix",
+ "test": "vitest run",
+ "test:coverage": "vitest run --coverage",
+ "test:ui": "vitest --ui",
+ "test:watch": "vitest",
+ "typecheck": "tsc --noEmit"
+ },
+ "dependencies": {
+ "@trpc/next": "^10.32.0",
+ "@trpc/server": "^10.32.0",
+ "superjson": "^1.12.3",
+ "zod": "^3.21.4"
+ },
+ "devDependencies": {
+ "@noodle/tsconfig": "workspace:^",
+ "@noodle/vitest": "workspace:^",
+ "@vitest/coverage-v8": "^0.32.2",
+ "eslint-config-noodle": "workspace:^",
+ "vite": "^4.3.9",
+ "vitest": "^0.32.2"
+ }
+}

packages/api/src/index.ts

@@ -0,0 +1,2 @@
+export * from './setup/context';
+export * from './root';

packages/api/src/root.ts

@@ -0,0 +1,8 @@
+import { greetingRouter } from './routers/greeting';
+import { createRouter } from './setup/trpc';
+
+export const appRouter = createRouter({
+ greeting: greetingRouter,
+});
+
+export type AppRouter = typeof appRouter;

packages/api/src/routers/greeting/greeting.spec.ts

@@ -0,0 +1,15 @@
+import { greetingRouter } from '.';
+import { createInnerContext } from '../../setup/context';
+
+describe('Hello router', () => {
+ it('should return hello world without inputs', async () => {
+ const context = createInnerContext({});
+ const caller = greetingRouter.createCaller(context);
+
+ const result = await caller.hello({});
+
+ expect(result).toEqual({
+ message: 'Hello World',
+ });
+ });
+});

packages/api/src/routers/greeting/index.ts

@@ -0,0 +1,17 @@
+import { z } from 'zod';
+
+import { createRouter, publicProcedure } from '../../setup/trpc';
+
+export const greetingRouter = createRouter({
+ hello: publicProcedure
+ .input(
+ z.object({
+ name: z.string().optional(),
+ }),
+ )
+ .query(({ input }) => {
+ return {
+ message: `Hello ${input.name ?? 'World'}`,
+ };
+ }),
+});

packages/api/src/setup/context.ts

@@ -0,0 +1,19 @@
+import { type CreateNextContextOptions } from '@trpc/server/adapters/next';
+
+// TODO: add session as an option to provide to context type
+// eslint-disable-next-line
+type ContextOptions = {};
+
+export const createInnerContext = (opts: ContextOptions) => {
+ // TODO: create the db connection here and pass it in the return object
+ return {
+ ...opts,
+ };
+};
+
+// TODO: get the session here and pass it to the inner function
+export const createContext = (_: CreateNextContextOptions) => {
+ return createInnerContext({});
+};
+
+export type Context = typeof createContext;

packages/api/src/setup/trpc.ts

@@ -0,0 +1,25 @@
+import { initTRPC } from '@trpc/server';
+import SuperJSON from 'superjson';
+import { ZodError } from 'zod';
+
+import { type Context } from './context';
+
+export const t = initTRPC.context<Context>().create({
+ transformer: SuperJSON,
+ errorFormatter({ shape, error }) {
+ return {
+ ...shape,
+ data: {
+ ...shape.data,
+ zodError:
+ error.cause instanceof ZodError ? error.cause.flatten() : null,
+ },
+ };
+ },
+});
+
+export const {
+ procedure: publicProcedure,
+ router: createRouter,
+ middleware,
+} = t;

packages/api/tsconfig.build.json

@@ -0,0 +1,10 @@
+{
+ "extends": "./tsconfig.json",
+ "compilerOptions": {
+ "noEmit": false,
+ "outDir": "dist",
+ "declarationMap": true
+ },
+ "include": ["src/**/*.ts"],
+ "exclude": ["src/**/*.test.ts", "src/**/*.spec.ts"]
+}

packages/api/tsconfig.json

@@ -0,0 +1,9 @@
+{
+ "extends": "@noodle/tsconfig/base.json",
+ "compilerOptions": {
+ "noEmit": true,
+ "types": ["vitest/globals"]
+ },
+ "exclude": ["./coverage/**/*"],
+ "include": ["**/*.ts"]
+}