feat: tRPC support

Author: jherr

templates/react/add-on/start/assets/src/router.tsx.ejs

@@ -24,6 +24,15 @@ export const createRouter = () => {
     },
     scrollRestoration: true,
     defaultPreloadStaleTime: 0,
+    <% if (addOnEnabled.tRPC) { %>
+    Wrap: (props: { children: React.ReactNode }) => {
+      return (
+        <TanstackQuery.Provider>
+          {props.children}
+        </TanstackQuery.Provider>
+      );
+    },
+  <% } %>
   }), TanstackQuery.getContext().queryClient)
   <% } else { %>
   const router = createTanstackRouter({

templates/react/add-on/tRPC/assets/src/integrations/trpc/init.ts

@@ -0,0 +1,9 @@
+import { initTRPC } from "@trpc/server";
+import superjson from "superjson";
+
+const t = initTRPC.create({
+  transformer: superjson,
+});
+
+export const createTRPCRouter = t.router;
+export const publicProcedure = t.procedure;

templates/react/add-on/tRPC/assets/src/integrations/trpc/react.ts

@@ -0,0 +1,4 @@
+import { createTRPCContext } from "@trpc/tanstack-react-query";
+import type { TRPCRouter } from "@/trpc/router";
+
+export const { TRPCProvider, useTRPC } = createTRPCContext<TRPCRouter>();

templates/react/add-on/tRPC/assets/src/integrations/trpc/router.ts

@@ -0,0 +1,18 @@
+import { TRPCError } from '@trpc/server'
+import type { TRPCRouterRecord } from '@trpc/server'
+// import { z } from 'zod'
+
+import { createTRPCRouter, publicProcedure } from './init'
+
+const peopleRouter = {
+  list: publicProcedure.query(async () =>
+    fetch('https://swapi.dev/api/people')
+      .then((res) => res.json())
+      .then((d) => d.results as { name: string }[]),
+  ),
+} satisfies TRPCRouterRecord
+
+export const trpcRouter = createTRPCRouter({
+  people: peopleRouter,
+})
+export type TRPCRouter = typeof trpcRouter

templates/react/add-on/tRPC/assets/src/routes/api.trpc.$.tsx

@@ -0,0 +1,16 @@
+import { createAPIFileRoute } from '@tanstack/react-start/api'
+import { fetchRequestHandler } from '@trpc/server/adapters/fetch'
+import { trpcRouter } from '@/integrations/trpc/router'
+
+function handler({ request }: { request: Request }) {
+  return fetchRequestHandler({
+    req: request,
+    router: trpcRouter,
+    endpoint: '/api/trpc',
+  })
+}
+
+export const APIRoute = createAPIFileRoute('/api/trpc/$')({
+  GET: handler,
+  POST: handler,
+})

templates/react/add-on/tRPC/info.json

@@ -0,0 +1,9 @@
+{
+  "name": "tRPC",
+  "description": "Integrate tRPC into your application.",
+  "phase": "add-on",
+  "templates": ["file-router"],
+  "link": "https://trpc.io/",
+  "routes": [],
+  "dependsOn": ["tanstack-query", "start"]
+}

templates/react/add-on/tRPC/package.json

@@ -0,0 +1,9 @@
+{
+  "dependencies": {
+    "@trpc/client": "^11.0.0",
+    "@trpc/server": "^11.0.0",
+    "@trpc/tanstack-react-query": "^11.0.0",
+    "superjson": "^2.2.2",
+    "zod": "^3.24.2"
+  }
+}

templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx

@@ -0,0 +1,70 @@
+<% if (addOnEnabled.tRPC) { %>
+import { QueryClient } from "@tanstack/react-query";
+import superjson from "superjson";
+import { createTRPCClient, httpBatchStreamLink } from "@trpc/client";
+import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
+
+import { TRPCProvider } from "@/integrations/trpc/react";
+
+import type { TRPCRouter } from "@/integrations/trpc/router";
+
+function getUrl() {
+  const base = (() => {
+    if (typeof window !== "undefined") return "";
+    return `http://localhost:${process.env.PORT ?? 3000}`;
+  })();
+  return base + "/api/trpc";
+}
+
+export const trpcClient = createTRPCClient<TRPCRouter>({
+  links: [
+    httpBatchStreamLink({
+      transformer: superjson,
+      url: getUrl(),
+    }),
+  ],
+});
+
+const queryClient = new QueryClient({
+  defaultOptions: {
+    dehydrate: { serializeData: superjson.serialize },
+    hydrate: { deserializeData: superjson.deserialize },
+  },
+});
+
+const serverHelpers = createTRPCOptionsProxy({
+  client: trpcClient,
+  queryClient: queryClient,
+});
+
+export function getContext() {
+  return {
+    queryClient,
+    trpc: serverHelpers,
+  };
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
+      {children}
+    </TRPCProvider>
+  );
+}
+<% } else { %>
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+
+const queryClient = new QueryClient()
+
+export function getContext() {
+  return {
+    queryClient,
+  }
+}
+
+export function Provider({ children }: { children: React.ReactNode }) {
+  return (
+    <QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
+  )
+}
+<% } %>

templates/react/add-on/tanstack-query/assets/src/integrations/tanstack-query/root-provider.tsx.ejs

@@ -1,13 +1,27 @@
 import { <% if (fileRouter) { %>createFileRoute<% } else { %>createRoute<% } %> } from '@tanstack/react-router'
 import { useQuery } from '@tanstack/react-query'
+<% if (addOnEnabled.tRPC) { %>
+import { useTRPC } from "@/integrations/trpc/react";
+<% } %>
 <% if (codeRouter) { %>
 import type { RootRoute } from '@tanstack/react-router'
 <% } else { %>
 export const Route = createFileRoute('/demo/tanstack-query')({
+<% if (addOnEnabled.tRPC) { %>
+  loader: async ({ context }) => {
+    await context.queryClient.prefetchQuery(
+      context.trpc.people.list.queryOptions()
+    );
+  },
+<% } %>
   component: TanStackQueryDemo,
 })
 <% } %>
 function TanStackQueryDemo() {
+<% if (addOnEnabled.tRPC) { %>
+  const trpc = useTRPC();
+  const { data } = useQuery(trpc.people.list.queryOptions());
+<% } else { %>
   const { data } = useQuery({
     queryKey: ['people'],
     queryFn: () =>
@@ -16,6 +30,7 @@ function TanStackQueryDemo() {
         .then((d) => d.results as { name: string }[]),
     initialData: [],
   })
+<% } %>
 
   return (
     <div className="p-4">