1// src/routes/api/index.api.ts
2import { json } from "@hattip/response";
3import { StatusCodes } from "http-status-codes";
4import { RequestContext } from "rakkasjs";
5
6export async function get(ctx: RequestContext) {
7try {
8    return json({ message: "welcome to rakkas root api" },{ status: StatusCodes.ACCEPTED });
9    } catch (error) {
10    return json(error, { status: StatusCodes.BAD_REQUEST });    }
11}
12
13export async function post(ctx: RequestContext) {
14    const body = await ctx.request.json();
15    try {
16        return json({body },{ status: StatusCodes.ACCEPTED });
17    } catch (error) {
18        return json(error,{ status: StatusCodes.BAD_REQUEST });
19    }
20}
21

1
2{
3  "compilerOptions": {
4    "target": "es2020",
5    "module": "ESNext",
6    "esModuleInterop": true,
7    "forceConsistentCasingInFileNames": true,
8    "strict": true,
9    "skipLibCheck": true,
10    "moduleResolution": "Node",
11    "resolveJsonModule": true,
12    "jsx": "react-jsx",
13    "baseUrl": ".",
14    "types": ["vite/client"],
15
16   
17   "paths": {
18      "@/*": ["src/*"]
19    }
20
21
22
23  }
24}
25

1// src/routes/api/trpc/[...trpc].api.ts
2import { fetchRequestHandler } from '@trpc/server/adapters/fetch';
3import { RequestContext } from 'rakkasjs';
4import { createTRPCContext } from '@/server/trpc';
5import { appRouter } from '@/server/routes/root';
6
7export async function all(ctx: RequestContext){
8    return fetchRequestHandler({
9        endpoint: '/api/trpc',
10        req: ctx.request,
11        router: appRouter,
12        createContext:createTRPCContext,
13    });
14}

1export function createTRPCContext({ req, resHeaders }: FetchCreateContextFnOptions) {
2  const user = { name: req.headers.get('username') ?? 'anonymous' };
3  // return createInnerTRPCContext({});
4  return { req, resHeaders, user };
5}
6

1const t = initTRPC.context<typeof createTRPCContext>().create({
2  transformer: superjson,
3  errorFormatter({ shape, error }) {
4    return {
5      ...shape,
6      data: {
7        ...shape.data,
8        zodError:
9          error.cause instanceof ZodError ? error.cause.flatten() : null,
10      },
11    };
12  },
13});

1export const createTRPCRouter = t.router;
2export const router = t.router
3export const publicProcedure = t.procedure;

1// src/server/routes/root.ts
2import { createTRPCRouter, publicProcedure } from '../trpc';
3import { helloRouter } from './hello';
4//  to test using a REST API client use a . to access nested routes insteda of a slash
5//ex: http://localhost:5173/api/trpc/welcome
6//ex: http://localhost:5173/api/trpc/hello.wave
7
8export const appRouter = createTRPCRouter({
9  hello:helloRouter,
10});
11
12// export type definition of API
13export type AppRouter = typeof appRouter;
14

1// src/server/routes/hello.ts
2import { createTRPCRouter, publicProcedure } from "../trpc";
3export const helloRouter = createTRPCRouter({
4    hey: publicProcedure.query((opts) => {
5        return `Hey there`;
6    }),
7    wave: publicProcedure.query(async(opts) => {
8        return `🙋‍♀️`;
9    }),
10
11})

1pnpm install @tanstack/react-query react-toastify lucide-react @unpic/react tailwind-merge

1// src/utils/trpc.ts
2import type { AppRouter } from '@/server/routes/root';
3import { createTRPCReact } from '@trpc/react-query';
4
5
6export const trpc = createTRPCReact<AppRouter>();
7

1// src/utils/client.ts
2import { trpc } from "./trpc";
3import { httpBatchLink } from "@trpc/react-query";
4import superjson from "superjson";
5
6const getBaseUrl = (url?:string) => {
7    if (typeof window !== "undefined") return ""; // browser should use relative url
8    const urlObj = new URL(url as string);
9    if (process.env.VERCEL_URL) return `https://${process.env.VERCEL_URL}`; // SSR should use vercel url
10    return urlObj.origin;
11};
12
13
14export const trpcClient = (url?:string)=>{
15   return trpc.createClient({
16        links: [
17            httpBatchLink({
18                url:`${getBaseUrl(url)}/api/trpc`,
19            }),
20        ],
21        transformer: superjson
22    });
23}
24

1// src/routes/layout.tsx
2const [queryClient] = useState(() => new QueryClient());
3...
4return(
5       <trpc.Provider client={trpcClient()} queryClient={queryClient}>
6       <QueryClientProvider client={queryClient}>
7         <section className="min-h-screen h-full w-full  ">{children}</section>
8       </QueryClientProvider>
9     </trpc.Provider>
10)

1npx bonita add tailwind

1pnpm i -D tailwindcss postcss autoprefixer daisyui  tailwindcss-animate tailwind-scrollbar tailwindcss-elevation prettier-plugin-tailwindcss

1npx tailwindcss init -p

1/** @type {import('tailwindcss').Config} */
2export default {
3  content: [
4    "./index.html",
5    "./src/**/*.{js,ts,jsx,tsx}",
6  ],
7  theme: {
8    extend: {},
9  },
10  plugins: [],
11}

1@tailwind base;
2@tailwind components;
3@tailwind utilities;

1// src/routes/layout.tsx
2import ./index.css
3

1// src/routes/index.page.tsx
2import { trpc } from "@/utils/trpc";
3
4export default function HomePage() {
5	const query = trpc.hello.hey.useQuery();
6	return (
7		<main className="flex flex-col gap-2 items-center">
8			<h1>Hello world!</h1>
9			<h3>{query?.data}</h3>
10		</main>
11	);
12}
13

1 // This is your Prisma schema file,
2// learn more about it in the docs: https://pris.ly/d/prisma-schema
3
4generator client {
5  provider = "prisma-client-js"
6}
7
8generator zod {
9  provider = "zod-prisma-types"
10}
11
12datasource db {
13  provider = "sqlite"
14  url      = env("DATABASE_URL")
15}
16
17model User {
18  id        String   @id @default(cuid())
19  name      String
20  email     String
21  password  String
22  createdAt DateTime @default(now())
23  updatedAt DateTime @updatedAt
24}
25
26model Post {
27  id        String   @id @default(cuid())
28  createdAt DateTime @default(now())
29  updatedAt DateTime @updatedAt
30
31  title String
32  body  String
33}
34
35 

1# .env
2DATABASE_URL="file:./db.sqlite"

1npx prisma generate
2npx prisma migrate dev

1// src/server/db.ts
2import { PrismaClient } from "@prisma/client";
3import { envs } from "@/utils/env";
4
5const globalForPrisma = globalThis as unknown as {
6  prisma: PrismaClient | undefined;
7};
8
9export const prisma =
10  globalForPrisma.prisma ??
11  new PrismaClient({
12    log:envs.DEV_MODE ? ["query", "error", "warn"] : ["error"],
13      // env.NODE_ENV === "development" ? ["query", "error", "warn"] : ["error"],
14  });
15
16// if (env.NODE_ENV !== "production") globalForPrisma.prisma = prisma;
17if (envs.PROD_MODE) globalForPrisma.prisma = prisma;
18

1export function createTRPCContext({ req, resHeaders }: FetchCreateContextFnOptions) {
2  const user = { name: req.headers.get('username') ?? 'anonymous' };
3  // return createInnerTRPCContext({});
4  return { req, resHeaders, user,prisma };
5}

1// src/server/posts.ts
2
3import { createTRPCRouter, publicProcedure } from "../trpc";
4import { z } from "zod";
5
6export const PostSchema = z.object({
7    id: z.string().cuid().optional(),
8    createdAt: z.coerce.date().optional(),
9    updatedAt: z.coerce.date().optional(),
10    title: z.string(),
11    body: z.string(),
12})
13
14export type Post = z.infer<typeof PostSchema>
15
16export const postRouter = createTRPCRouter({
17    //  get the full list
18    getFullList: publicProcedure.query(({ctx}) => {
19        const posts = ctx.prisma.post.findMany();
20        return posts;
21    }),
22
23    create: publicProcedure
24    .input(PostSchema)
25    .mutation(({ctx, input}) => {
26        const post = ctx.prisma.post.create({
27            data: input,
28        });
29        return post;
30    }),
31
32    update: publicProcedure
33    .input(PostSchema)
34    .mutation(({ctx, input}) => {
35        const post = ctx.prisma.post.update({ where: {id: input.id},data: input,});
36        return post;
37    }),
38    delete: publicProcedure
39    .input(z.object({id: z.string()}))
40    .mutation(({ctx, input}) => {
41        const post = ctx.prisma.post.delete({ where: {id: input.id}});
42        return post;
43    })
44})
45
46// src/server/root.ts
47export const appRouter = createTRPCRouter({
48  hello:helloRouter,
49  posts:postRouter
50});
51
52

1// src/routes/posts
2  const query = trpc.posts.getFullList.useQuery();
3  return (
4    <main className="flex flex-col gap-2 items-center">
5      <h1>Hello world!</h1>
6      <h3>{query?.data.map(...)}</h3>
7    </main>
8  );
9

1/* eslint-disable no-var */
2import { startClient } from "rakkasjs";
3import { QueryClientProvider, QueryClient } from "@tanstack/react-query";
4import { trpc } from "./utils/trpc";
5import { trpcClient } from "./utils/client";
6
7
8const queryClient = new QueryClient({
9  defaultOptions: {
10    queries: {
11      suspense: true,
12      staleTime: 100,
13      refetchOnWindowFocus: false,
14      refetchOnReconnect: false,
15    },
16  },
17});
18
19function setQueryData(data: Record<string, unknown>) {
20  for (const [key, value] of Object.entries(data)) {
21    queryClient.setQueryData(JSON.parse(key), value, { updatedAt: Date.now() });
22  }
23}
24
25declare global {
26  var $TQD: Record<string, unknown> | undefined;
27  var $TQS: typeof setQueryData;
28}
29
30// Insert data that was already streamed before this point
31setQueryData(globalThis.$TQD ?? {});
32// Delete the global variable so that it doesn't get serialized again
33delete globalThis.$TQD;
34// From now on, insert data directly
35globalThis.$TQS = setQueryData;
36
37startClient({
38  hooks: {
39    wrapApp(app) {
40      return (
41            <trpc.Provider client={trpcClient()} queryClient={queryClient}>
42              <QueryClientProvider client={queryClient}>{app}</QueryClientProvider>
43            </trpc.Provider>
44      );
45    },
46  },
47});
48

1import { RequestContext, createRequestHandler } from "rakkasjs";
2import { cookie } from "@hattip/cookie";
3
4import {
5  QueryCache,
6  QueryClient,
7  QueryClientProvider,
8} from "@tanstack/react-query";
9import { uneval } from "devalue";
10import { trpc } from "./utils/trpc";
11import { trpcClient } from "./utils/client";
12
13declare module "rakkasjs" {
14  interface ServerSideLocals {
15    session: any;
16  }
17}
18
19type CreateRequestHandlerParams = Parameters<typeof createRequestHandler>;
20
21const attachSession = async (ctx: RequestContext) => {
22  try {
23    // ctx.locals.session = await getSession(
24    //     ctx.platform.request,
25    //     ctx.platform.response
26    // );
27
28    ctx.locals.session = {
29      user: "jeffery",
30    };
31  } catch (error) {
32    throw new Error("Failed to attach session");
33  }
34};
35const logger = async (ctx: RequestContext) => {
36  try {
37    console.log("========", ctx.ip, "=============");
38  } catch (error) {
39    throw new Error("Failed to attach session");
40  }
41};
42
43export default createRequestHandler({
44  middleware: {
45    // HatTip middleware to be injected
46    // before the page routes handler.
47    // @ts-expect-error
48    beforePages: [cookie(), attachSession],
49    // HatTip middleware to be injected
50    // after the page routes handler but
51    // before the API routes handler
52    beforeApiRoutes: [logger],
53    // HatTip middleware to be injected
54    // after the API routes handler but
55    // before the 404 handler
56    beforeNotFound: [],
57  },
58
59  createPageHooks(ctx) {
60    let queries = Object.create(null);
61    console.log("hattip ctx", ctx.request.url);
62    return {
63      wrapApp(app) {
64        const queryCache = new QueryCache({
65          onSuccess(data, query) {
66            // Store newly fetched data
67            queries[query.queryHash] = data;
68          },
69        });
70
71        const queryClient = new QueryClient({
72          queryCache,
73          defaultOptions: {
74            queries: {
75              suspense: true,
76              staleTime: Infinity,
77              refetchOnWindowFocus: false,
78              refetchOnReconnect: false,
79            },
80          },
81        });
82
83        return (
84          <trpc.Provider
85            client={trpcClient(ctx.request.url)}
86            queryClient={queryClient}
87          >
88            <QueryClientProvider client={queryClient}>
89              {app}
90            </QueryClientProvider>
91          </trpc.Provider>
92        );
93      },
94
95      emitToDocumentHead() {
96        return `<script>$TQD=Object.create(null);$TQS=data=>Object.assign($TQD,data);</script>`;
97      },
98
99      emitBeforeSsrChunk() {
100        if (Object.keys(queries).length === 0) return "";
101
102        // Emit a script that calls the global $TQS function with the
103        // newly fetched query data.
104
105        const queriesString = uneval(queries);
106        queries = Object.create(null);
107        return `<script>$TQS(${queriesString})</script>`;
108      },
109    };
110  },
111});
112

1npx bonita create