tRPC Tanstack React Query Integration Issue - Provider Approach

Problem

When trying to use the tRPC Tanstack React Query integration with createTRPCContext (provider approach), the queryOptions and mutationOptions methods are not available on tRPC procedures, causing TypeScript errors.

Environment

• @trpc/tanstack-react-query: ^11.4.3
• @tanstack/react-query: ^5.79.0
• @trpc/client: ^11.4.3
• @trpc/server: ^11.4.3
• TypeScript: ^5.7.3

Expected Behavior (Provider Approach)

import { createTRPCContext } from "@trpc/tanstack-react-query";
const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();

// In component:
const utils = useTRPC();
const query = useQuery(utils.foo.list.queryOptions());
const mutation = useMutation(utils.foo.create.mutationOptions());

Actual Behavior

// TypeScript errors:
// hooks/use-requests.ts:11:22 - error TS2339: Property 'queryOptions' does not exist on type 
// 'DecoratedRouterRecord<{ ctx: TRPCContext; meta: object; errorShape: {...}; }>'
// Property 'queryOptions' does not exist on type 
// 'DecorateMutationProcedure<{ input: any; output: any; transformer: true; errorShape: {...}; }>'

// hooks/use-requests.ts:20:24 - error TS2339: Property 'mutationOptions' does not exist on type
// 'DecoratedRouterRecord<{ ctx: TRPCContext; meta: object; errorShape: {...}; }>'
// Property 'mutationOptions' does not exist on type 
// 'DecorateQueryProcedure<{ input: any; output: any; transformer: true; errorShape: {...}; }>'

Root Cause

The issue occurs in BOTH approaches (createTRPCOptionsProxy AND createTRPCContext) because tRPC procedures are cast to any due to TypeScript portability issues with Supabase auth types:

// packages/trpc/src/server/procedures.ts
export const workspaceProcedure = procedures.workspaceProcedure as any;
//                                                                ^^^^^^^^
// This breaks type inference for ANY Tanstack React Query integration

TypeScript errors when removing as any:

• TS2742: The inferred type cannot be named without a reference to '@supabase/supabase-js'
• TS4023: Exported variable has or is using name from external module but cannot be named

Files Structure

Client Setup (Provider Approach)

// apps/web/lib/trpc/client.ts
import { createTRPCContext } from "@trpc/tanstack-react-query";
export const { TRPCProvider, useTRPC, useTRPCClient } = createTRPCContext<AppRouter>();

Provider Setup

// apps/web/lib/trpc/provider.tsx
<QueryClientProvider client={queryClient}>
  <TRPCProvider client={trpcClient} queryClient={queryClient}>
    {children}
  </TRPCProvider>
</QueryClientProvider>

Usage (Fails)

// apps/web/hooks/use-requests.ts
const utils = useTRPC();
// ❌ Property 'queryOptions' does not exist
const query = useQuery(utils.foo.list.queryOptions({}));
const mutation = useMutation(utils.bar.update.mutationOptions({}));

Setup Instructions

1. pnpm install
2. pnpm check - Shows TypeScript errors
3. Try to use utils.foo.list.queryOptions() and utils.bar.update.mutationOptions() in hooks
4. Observe missing queryOptions/mutationOptions methods

Key Insight

The issue is NOT with the client setup approach (proxy vs provider) - it's with the server-side type exports. Both approaches fail because the underlying router types are broken due to the as any cast needed for Supabase type portability.

Success Criteria

1. Remove as any cast from procedures without TypeScript errors
2. utils.procedure.queryOptions() and utils.procedure.mutationOptions() methods exist
3. Full TypeScript support in Tanstack React Query integration
4. pnpm check passes with no errors