/** * tRPC Client Configuration * * This file sets up the tRPC client for use in React components. * Provides type-safe API calls with automatic serialization. */ import { httpBatchLink } from "@trpc/client"; import { createTRPCNext } from "@trpc/next"; import superjson from "superjson"; import type { AppRouter } from "@/server/routers/_app"; import { CSRFClient } from "./csrf-client"; function getBaseUrl() { if (typeof window !== "undefined") { // browser should use relative path return ""; } if (process.env.VERCEL_URL) { // reference for vercel.com return `https://${process.env.VERCEL_URL}`; } if (process.env.RENDER_INTERNAL_HOSTNAME) { // reference for render.com return `http://${process.env.RENDER_INTERNAL_HOSTNAME}:${process.env.PORT}`; } // assume localhost return `http://localhost:${process.env.PORT ?? 3000}`; } /** * Main tRPC client instance */ export const trpc = createTRPCNext({ config() { return { links: [ httpBatchLink({ /** * If you want to use SSR, you need to use the server's full URL * @link https://trpc.io/docs/ssr **/ url: `${getBaseUrl()}/api/trpc`, /** * Transformer for data serialization */ transformer: superjson, /** * Set custom request headers on every request from tRPC * @link https://trpc.io/docs/v10/header */ headers() { const headers: Record = {}; // Add CSRF token for state-changing operations const csrfToken = CSRFClient.getToken(); if (csrfToken) { headers["x-csrf-token"] = csrfToken; } return headers; }, /** * Custom fetch implementation to include credentials */ fetch(url, options) { return fetch(url, { ...options, credentials: "include", }); }, }), ], /** * Query client configuration * @link https://trpc.io/docs/v10/react-query-integration */ queryClientConfig: { defaultOptions: { queries: { // Stale time of 30 seconds staleTime: 30 * 1000, // Cache time of 5 minutes gcTime: 5 * 60 * 1000, // Retry failed requests up to 3 times retry: 3, // Retry delay that increases exponentially retryDelay: (attemptIndex) => Math.min(1000 * 2 ** attemptIndex, 30000), }, mutations: { // Retry mutations once on network errors retry: 1, }, }, }, }; }, /** * Whether tRPC should await queries when server rendering pages * @link https://trpc.io/docs/nextjs#ssr-boolean-default-false */ ssr: false, transformer: superjson, }); /** * Type helper for tRPC router */ export type TRPCRouter = typeof trpc;