feat(core-trpc): scaffold tRPC client with React Query providers
- createTRPCContext + useTRPC hook for typed client access - NextTrpcProvider with SSR-safe absolute URL resolution - TanstackTrpcProvider for TanStack Start apps - /api/trpc catch-all route handler in web-next - Wire NextTrpcProvider into app providers - Add @repo/core-trpc to transpilePackages
This commit is contained in:
3
packages/core-trpc/eslint.config.js
Normal file
3
packages/core-trpc/eslint.config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
import baseConfig from "@repo/core-eslint/base";
|
||||
|
||||
export default baseConfig;
|
||||
37
packages/core-trpc/package.json
Normal file
37
packages/core-trpc/package.json
Normal file
@@ -0,0 +1,37 @@
|
||||
{
|
||||
"name": "@repo/core-trpc",
|
||||
"private": true,
|
||||
"version": "0.0.0",
|
||||
"type": "module",
|
||||
"exports": {
|
||||
".": "./src/index.ts",
|
||||
"./next": "./src/providers/next-provider.tsx",
|
||||
"./tanstack": "./src/providers/tanstack-provider.tsx"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "tsc --noEmit",
|
||||
"lint": "eslint .",
|
||||
"typecheck": "tsc --noEmit",
|
||||
"test": "vitest run --passWithNoTests"
|
||||
},
|
||||
"dependencies": {
|
||||
"@repo/core-api": "workspace:*",
|
||||
"@tanstack/react-query": "^5.66.0",
|
||||
"@trpc/client": "^11.17.0",
|
||||
"@trpc/react-query": "^11.17.0",
|
||||
"@trpc/server": "^11.17.0",
|
||||
"@trpc/tanstack-react-query": "^11.17.0",
|
||||
"react": "^19.0.0",
|
||||
"superjson": "^2.2.1"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@repo/core-eslint": "workspace:*",
|
||||
"@repo/core-testing": "workspace:*",
|
||||
"@repo/core-typescript": "workspace:*",
|
||||
"@testing-library/jest-dom": "^6.5.0",
|
||||
"@testing-library/react": "^16.0.0",
|
||||
"@types/react": "^19.0.0",
|
||||
"jsdom": "^25.0.0",
|
||||
"vitest": "^3.0.0"
|
||||
}
|
||||
}
|
||||
12
packages/core-trpc/src/client.test.ts
Normal file
12
packages/core-trpc/src/client.test.ts
Normal file
@@ -0,0 +1,12 @@
|
||||
import { describe, it, expect } from "vitest";
|
||||
import { useTRPC, TRPCProvider } from "./client";
|
||||
|
||||
describe("core-trpc client exports", () => {
|
||||
it("exports useTRPC hook", () => {
|
||||
expect(useTRPC).toBeTypeOf("function");
|
||||
});
|
||||
|
||||
it("exports TRPCProvider component", () => {
|
||||
expect(TRPCProvider).toBeTypeOf("function");
|
||||
});
|
||||
});
|
||||
6
packages/core-trpc/src/client.ts
Normal file
6
packages/core-trpc/src/client.ts
Normal file
@@ -0,0 +1,6 @@
|
||||
"use client";
|
||||
|
||||
import { createTRPCContext } from "@trpc/tanstack-react-query";
|
||||
import type { AppRouter } from "@repo/core-api";
|
||||
|
||||
export const { TRPCProvider, useTRPC } = createTRPCContext<AppRouter>();
|
||||
3
packages/core-trpc/src/index.ts
Normal file
3
packages/core-trpc/src/index.ts
Normal file
@@ -0,0 +1,3 @@
|
||||
export { useTRPC, TRPCProvider } from "./client";
|
||||
export { getQueryClient } from "./query-client";
|
||||
export type { AppRouter } from "@repo/core-api";
|
||||
40
packages/core-trpc/src/providers/next-provider.tsx
Normal file
40
packages/core-trpc/src/providers/next-provider.tsx
Normal file
@@ -0,0 +1,40 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { createTRPCClient, httpBatchLink } from "@trpc/client";
|
||||
import superjson from "superjson";
|
||||
import type { AppRouter } from "@repo/core-api";
|
||||
import { TRPCProvider } from "../client";
|
||||
import { getQueryClient } from "../query-client";
|
||||
|
||||
function getBaseUrl() {
|
||||
if (typeof window !== "undefined") return "";
|
||||
return `http://localhost:${process.env.PORT ?? 3000}`;
|
||||
}
|
||||
|
||||
export function NextTrpcProvider({
|
||||
children,
|
||||
trpcUrl = "/api/trpc",
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
trpcUrl?: string;
|
||||
}) {
|
||||
const [queryClient] = useState(() => getQueryClient());
|
||||
const [trpcClient] = useState(() =>
|
||||
createTRPCClient<AppRouter>({
|
||||
links: [
|
||||
httpBatchLink({
|
||||
url: `${getBaseUrl()}${trpcUrl}`,
|
||||
transformer: superjson,
|
||||
}),
|
||||
],
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</TRPCProvider>
|
||||
);
|
||||
}
|
||||
30
packages/core-trpc/src/providers/tanstack-provider.tsx
Normal file
30
packages/core-trpc/src/providers/tanstack-provider.tsx
Normal file
@@ -0,0 +1,30 @@
|
||||
"use client";
|
||||
|
||||
import { useState } from "react";
|
||||
import { QueryClientProvider } from "@tanstack/react-query";
|
||||
import { createTRPCClient, httpBatchLink } from "@trpc/client";
|
||||
import superjson from "superjson";
|
||||
import type { AppRouter } from "@repo/core-api";
|
||||
import { TRPCProvider } from "../client";
|
||||
import { getQueryClient } from "../query-client";
|
||||
|
||||
export function TanstackTrpcProvider({
|
||||
children,
|
||||
trpcUrl,
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
trpcUrl: string;
|
||||
}) {
|
||||
const [queryClient] = useState(() => getQueryClient());
|
||||
const [trpcClient] = useState(() =>
|
||||
createTRPCClient<AppRouter>({
|
||||
links: [httpBatchLink({ url: trpcUrl, transformer: superjson })],
|
||||
}),
|
||||
);
|
||||
|
||||
return (
|
||||
<TRPCProvider trpcClient={trpcClient} queryClient={queryClient}>
|
||||
<QueryClientProvider client={queryClient}>{children}</QueryClientProvider>
|
||||
</TRPCProvider>
|
||||
);
|
||||
}
|
||||
22
packages/core-trpc/src/query-client.ts
Normal file
22
packages/core-trpc/src/query-client.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import { QueryClient } from "@tanstack/react-query";
|
||||
|
||||
let clientQueryClient: QueryClient | undefined;
|
||||
|
||||
const defaultOptions = {
|
||||
queries: {
|
||||
staleTime: 30 * 1000,
|
||||
refetchOnWindowFocus: false,
|
||||
},
|
||||
};
|
||||
|
||||
export function getQueryClient(): QueryClient {
|
||||
if (typeof window === "undefined") {
|
||||
// Server: always create a new instance per request
|
||||
return new QueryClient({ defaultOptions });
|
||||
}
|
||||
// Browser: singleton
|
||||
if (!clientQueryClient) {
|
||||
clientQueryClient = new QueryClient({ defaultOptions });
|
||||
}
|
||||
return clientQueryClient;
|
||||
}
|
||||
17
packages/core-trpc/tsconfig.json
Normal file
17
packages/core-trpc/tsconfig.json
Normal file
@@ -0,0 +1,17 @@
|
||||
{
|
||||
"extends": "@repo/core-typescript/base.json",
|
||||
"compilerOptions": {
|
||||
"outDir": "dist",
|
||||
"rootDir": ".",
|
||||
"lib": ["ES2022", "DOM"],
|
||||
"jsx": "preserve",
|
||||
"declaration": false,
|
||||
"declarationMap": false,
|
||||
"types": ["vitest/globals", "@testing-library/jest-dom"],
|
||||
"paths": {
|
||||
"@/*": ["./src/*"]
|
||||
}
|
||||
},
|
||||
"include": ["src/**/*"],
|
||||
"exclude": ["node_modules", "dist"]
|
||||
}
|
||||
4
packages/core-trpc/turbo.json
Normal file
4
packages/core-trpc/turbo.json
Normal file
@@ -0,0 +1,4 @@
|
||||
{
|
||||
"extends": ["//"],
|
||||
"tags": ["core-composition"]
|
||||
}
|
||||
7
packages/core-trpc/vitest.config.ts
Normal file
7
packages/core-trpc/vitest.config.ts
Normal file
@@ -0,0 +1,7 @@
|
||||
import path from "node:path";
|
||||
import { mergeConfig } from "vitest/config";
|
||||
import { jsdomVitestConfig } from "@repo/core-typescript/vitest.base.jsdom";
|
||||
|
||||
export default mergeConfig(jsdomVitestConfig, {
|
||||
resolve: { alias: { "@": path.resolve(__dirname, "./src") } },
|
||||
});
|
||||
Reference in New Issue
Block a user