Skip to main content

TRPC v11 Usage

Asset360 uses TRPC v11 with the new syntax.

Key Pattern​

export default function MyComponent() {
  const trpc = useTRPC();
  const queryClient = useQueryClient();

  // Create query options
  const fundQuery = trpc.org.funds.getAll.queryOptions();
  const { data: funds } = useQuery(fundQuery);

  // Create mutation options
  const createMutation = trpc.org.funds.create.mutationOptions();
  const { mutate: createFund } = useMutation(createMutation);

  // Query key for cache manipulation
  const fundQueryKey = trpc.org.funds.getAll.queryKey();
  const invalidate = () => {
    queryClient.invalidateQueries({ queryKey: fundQueryKey });
  };

  return <div>...</div>;
}

Never Use Old Syntax​

❌ Don't use: trpc.org.funds.getAll.useQuery()

✅ Use: useQuery(trpc.org.funds.getAll.queryOptions())

Router layout recommendation (Approach A)​

Asset360 recommends a namespaced tRPC router layout that mirrors frontend routes for better developer experience and consistency. Top-level namespaces:

  • org - organization-scoped procedures (filtered by ctx.user.organizationId)
  • org.fund - fund-scoped procedures requiring both organization and fund context

Frontend-Backend Route Mapping Examples:

  • /$orgSlug/funds → trpc.org.funds.*
  • /$orgSlug/users → trpc.org.users.*
  • /$orgSlug/f/$fundCode/accounting → trpc.org.fund.accounting.*
  • /$orgSlug/f/$fundCode/portfolio → trpc.org.fund.portfolio.*

Use procedure factories (orgProcedure, fundProcedure) to attach middleware and authorization consistently. System users accessing these procedures must be properly audited.