import type { app as ElysiaApp } from '@/app/api/[[...elysia]]/route'
import { treaty } from '@elysiajs/eden'
// this require .api to enter /api prefix
export const api = treaty<app>().api

import { api } from '@/lib/api'

export default async function Page() {
  const message = await api.get()

  return <h1>Hello, {message}</h1>
}

import type { app as HonoApp } from '@/app/api/[[...hono]]/route'
import { hc } from 'hono/client'

export const api = hc<HonoApp>('/api')

import { api } from '@/lib/api'
export default async function Page() {
  const response = await api.$get('/hello')
  const data = await response.json()

  return <h1>{data.message}</h1>
}

import { initTRPC } from '@trpc/server';
export const createContext = (props: {
  headers: Request
}) => ({ userId: 'demo-user' });
export type Context = Awaited<ReturnType<typeof createContext>>;
const t = initTRPC.context<Context>().create();
export const router = t.router;
export const publicProcedure = t.procedure;
export const protectedProcedure = t.procedure.use(({ ctx, next }) => {
  if (!ctx.userId) throw new Error('Not authenticated');
  return next({ ctx });
});

import { z } from 'zod';
import { router, publicProcedure, protectedProcedure } from '../trpc';
const users = [{ id: 1, name: 'Ada', email: 'ada@example.com' }];
export const userRouter = router({
  list: publicProcedure.query(() => users),
  createUser: protectedProcedure
    .input(z.object({
      name: z.string().min(1, 'Name cannot be empty'),
      email: z.string().email('Invalid email address'),
    }))
    .mutation(async ({ input }) => {
      const exists = users.some(u => u.email === input.email);
      if (exists) throw new Error('Email already exists');
      const user = { id: users.length + 1, ...input };
      users.push(user);
      return user;
    }),
});

import { fetchRequestHandler } from "@trpc/server/adapters/fetch";
import type { NextRequest } from "next/server";
import { createTRPCContext } from "~server/trpc/init";
import { appRouter } from "~server/trpc/root";

const handler = (req: NextRequest) =>
  fetchRequestHandler({
    endpoint: "/api/trpc",
    req,
    router: appRouter,
    createContext: () => createTRPCContext({ headers: req.headers }),
    onError:
      process.env.NODE_ENV === "development"
        ? ({ path, error }) => {
            const { code, cause } = error;
            console.error(
              `❌ tRPC failed on ${path ?? "<no-path>"}: ${code} - ${cause}`,
            );
          }
        : undefined,
    allowMethodOverride: true,
  });
export { handler as GET, handler as POST };

'use client'
import type { AppRouter } from '~server/trpc/root'
import {
  defaultShouldDehydrateQuery,
  QueryCache,
  QueryClient,
} from '@tanstack/react-query'
import {
  createTRPCClient,
  httpBatchStreamLink,
  httpSubscriptionLink,
  splitLink,
} from '@trpc/client'
import { createTRPCOptionsProxy } from '@trpc/tanstack-react-query'
import { cache } from 'react'
import SuperJSON from 'superjson'
import { createTRPCContext } from "@trpc/tanstack-react-query";
import { QueryClientProvider } from "@tanstack/react-query";
import type { PropsWithChildren } from "react";
import type { AppRouter } from "~/server/trpc/root";

const { TRPCProvider: Provider, useTRPC, useTRPCClient } =
  createTRPCContext<AppRouter>();

export { useTRPC, useTRPCClient }

export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    
  }),
  defaultOptions: {
    queries: { staleTime: 60 * 1000 },
    dehydrate: {
      serializeData: SuperJSON.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: {
      deserializeData: SuperJSON.deserialize,
    },
  },
})

interface TRPCProviderProps extends PropsWithChildren {

}

export function TRPCProvider({
  trpcClient,
}: TRPCProviderProps) {
    const client = createTRPCClient<AppRouter>({
      links: [
        splitLink({
          condition: (op) => op.type === 'subscription',
          true: httpSubscriptionLink({
            url: '/api/trpc',
            transformer: SuperJSON,
          }),

          false: httpBatchStreamLink({
            transformer: SuperJSON,
            url: '/api/trpc',
            headers: async () => {
              const headers = new Headers()
              return headers
            },
            fetch: (url, options) => {
              return fetch(url, {
                ...options,
                credentials: 'include',
              })
            },
          }),
        }),
      ],
    })

  const trpc = createTRPCOptionsProxy({
    client,
    queryClient,
  })

  return (
    <Provider trpcClient={trpc} queryClient={queryClient}>
      <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
    </Provider>
  );
}

import { TRPCProvider } from '@/lib/trpc'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <TRPCProvider>
          {children}
        </TRPCProvider>
      </body>
    </html>
  )
}

'use client'
import { useTRPC } from '@/lib/trpc'
import { useQuery, useMutation } from '@tanstack/react-query'

export default function Page() {
  const trpc = useTRPC()
  const { data:users, isLoading } = useQuery(trpc.users.list.queryOptions())
  const createUserMutation = useMutation(trpc.users.createUser.mutationOptions())
  const [name, setName] = useState('Angel');
  const [email, setEmail] = useState('angel@example.com');

  if (isLoading) return <div>Loading...</div>

  return (
    <div style={{ padding: 20, fontFamily: 'Inter, sans-serif' }}>
      <h2>tRPC Demo: Create User</h2>
      <h3>Existing users</h3>
      <ul>
        {users.map(u => (
          <li key={u.id}>{u.name} — {u.email}</li>
        ))}
      </ul>
      <h3>Create user</h3>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
        <button onClick={() => createUserMutation.mutate({ name, email })}>Create</button>
      </div>
      {createUserMutation.isPending && <p>Creating...</p>}
      {createUserMutation.error && <p style={{ color: 'crimson' }}>{createUserMutation.error.message}</p>}
    </div>
  )
}

import { os, ORPCError } from "@orpc/server";


export const publicProcedure = os

export const protectedProcedure = os.use( async ({ ctx, next }) => {
  if (!ctx.userId) throw new ORPCError("UNAUTHORIZED", { message: "Not authenticated" });
  const result = await next({ ctx });

  return result
});

export { ORPCError }

import * as z from "zod";
import { publicProcedure, protectedProcedure, ORPCError } from "../orpc"

const users = [{ id: 1, name: "Ada", email: "ada@example.com" }];

const UserSchema = z.object({
id: z.number().int().min(1),
name: z.string(),
email: z.string().email(),
});

const CreateUserInput = z.object({
name: z.string().min(1, "Name cannot be empty"),
email: z.string().email("Invalid email address"),
});

export const userRouter = {
list: publicProcedure
  .route({ method: "GET", path: "/users" })
  .output(z.array(UserSchema))
  .handler(async () => users),

create: protectedProcedure
  .route({ method: "POST", path: "/users" })
  .input(CreateUserInput)
  .output(UserSchema)
  .handler(async ({ input }) => {
    if (users.some((u) => u.email === input.email)) {
      throw new ORPCError("CONFLICT", { message: "Email already exists" });
    }
    const user = { id: users.length + 1, ...input };
    users.push(user);
    return user;
  }),
};

import { createRouterClient } from "@orpc/server";
import { RPCHandler } from "@orpc/server/fetch";
import { BatchHandlerPlugin } from "@orpc/server/plugins";

import { usersRouter } from "./routers/users";

const router = {
  user: usersRouter,
};

export type ORPCRouter = typeof router;

export const handler = new RPCHandler(router, {
  plugins: [new BatchHandlerPlugin()],
});

export const api = createRouterClient(router);

import { handler } from "@/server/orpc";

async function handleRequest(request: Request) {
  const { response } = await handler.handle(request, {
    prefix: "/api/orpc",
    context: {
      headers: request.headers
    },
  });

  return response ?? new Response("Not found", { status: 404 });
}

export const GET = handleRequest;
export const POST = handleRequest;
export const PUT = handleRequest;
export const PATCH = handleRequest;
export const DELETE = handleRequest;

'use client'
import { type RouterUtils } from "@orpc/react-query";
import { type RouterClient } from "@orpc/server";
import { createContext, useContext } from "react";
import { QueryClientProvider } from "@tanstack/react-query";
import { ReactQueryStreamedHydration } from "@tanstack/react-query-next-experimental";
import { type ORPCRouter } from "~/server/api";
import {
  defaultShouldDehydrateQuery,
  QueryCache,
  QueryClient,
} from '@tanstack/react-query'
import SuperJSON from 'superjson'

type ORPCReactUtils = RouterUtils<RouterClient<ORPCRouter>>;

export const ORPCContext = createContext<ORPCReactUtils | undefined>(undefined);

export const queryClient = new QueryClient({
  queryCache: new QueryCache({
    
  }),
  defaultOptions: {
    queries: { staleTime: 60 * 1000 },
    dehydrate: {
      serializeData: SuperJSON.serialize,
      shouldDehydrateQuery: (query) =>
        defaultShouldDehydrateQuery(query) || query.state.status === 'pending',
    },
    hydrate: {
      deserializeData: SuperJSON.deserialize,
    },
  },
})

export function useORPC(): ORPCReactUtils {
  const orpc = useContext(ORPCContext);
  if (!orpc) {
    throw new Error("ORPCContext is not set up properly");
  }
  return orpc;
}

import { createORPCClient } from "@orpc/client";
import { RPCLink } from "@orpc/client/fetch";
import { BatchLinkPlugin } from "@orpc/client/plugins";
import { createORPCReactQueryUtils } from "@orpc/react-query";
import { type RouterClient } from "@orpc/server";

function createORPC(cookie?: string) {
  const link = new RPCLink({
    url: "/api/orpc",
    headers: {
      Cookie: cookie,
    },
    plugins: [
      new BatchLinkPlugin({
        groups: [
          {
            condition: () => true,
            context: {},
          },
        ],
      }),
    ],
  });

  const client: RouterClient<ORPCRouter> = createORPCClient(link);

  return createORPCReactQueryUtils(client);
}


export default function ORPCProvider({
  children,
  cookie,
}: {
  children: React.ReactNode;
  cookie?: string;
}) {
  const orpc = createORPC(cookie);

  return (
    <QueryClientProvider client={queryClient}>
      <ReactQueryStreamedHydration>
        <ORPCContext.Provider value={orpc}>{children}</ORPCContext.Provider>
      </ReactQueryStreamedHydration>
    </QueryClientProvider>
  );
}

import { ORPCProvider } from '@/lib/trpc'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>
        <ORPCProvider>
          {children}
        </ORPCProvider>
      </body>
    </html>
  )
}

'use client'
import { useORPC } from '@/lib/orpc'
import { useQuery, useMutation } from '@tanstack/react-query'

export default function Page() {
  const orpc = useORPC()
  const { data:users, isLoading } = useQuery(orpc.users.list.queryOptions())
  const createUserMutation = useMutation(orpc.users.createUser.mutationOptions())
  const [name, setName] = useState('Angel');
  const [email, setEmail] = useState('angel@example.com');

  if (isLoading) return <div>Loading...</div>

  return (
    <div style={{ padding: 20, fontFamily: 'Inter, sans-serif' }}>
      <h2>tRPC Demo: Create User</h2>
      <h3>Existing users</h3>
      <ul>
        {users.map(u => (
          <li key={u.id}>{u.name} — {u.email}</li>
        ))}
      </ul>
      <h3>Create user</h3>
      <div style={{ display: 'flex', gap: 8, marginBottom: 8 }}>
        <input value={name} onChange={(e) => setName(e.target.value)} placeholder="Name" />
        <input value={email} onChange={(e) => setEmail(e.target.value)} placeholder="Email" />
        <button onClick={() => createUserMutation.mutate({ name, email })}>Create</button>
      </div>
      {createUserMutation.isPending && <p>Creating...</p>}
      {createUserMutation.error && <p style={{ color: 'crimson' }}>{createUserMutation.error.message}</p>}
    </div>
  )
}