tRPC Tanstack React Query Integration Issue

Problem

When trying to use the new tRPC Tanstack React Query integration with @trpc/tanstack-react-query, 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
Next.js: 15.3.5

Expected Behavior (from tRPC docs)

import { useQuery, useMutation } from '@tanstack/react-query';
import { trpc } from './trpc-client';

// Should work according to docs
const query = useQuery(trpc.posts.list.queryOptions());
const mutation = useMutation(trpc.posts.create.mutationOptions());

Actual Behavior

// TypeScript errors:
// Property 'queryOptions' does not exist on type 'DecoratedQuery<...>'
// Property 'mutationOptions' does not exist on type 'DecoratedMutation<...>'

Root Cause

The issue stems from tRPC procedures being 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 createTRPCOptionsProxy

TypeScript errors when removing as any:

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

Minimal Reproduction

1. tRPC Client Setup

// lib/trpc/client.ts
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query";
import { createTRPCClient, httpBatchLink } from "@trpc/client";
import { QueryClient } from "@tanstack/react-query";
import type { AppRouter } from "./server/router";

const trpcClient = createTRPCClient<AppRouter>({
  links: [
    httpBatchLink({
      url: "/api/trpc",
      transformer: superjson,
    }),
  ],
});

export const trpc = createTRPCOptionsProxy<AppRouter>({
  client: trpcClient,
  queryClient: new QueryClient(),
});

2. tRPC Server Setup (Problematic)

// server/procedures.ts
import { initTRPC } from "@trpc/server";
import type { Context } from "./context";

const t = initTRPC.context<Context>().create();

// This works internally but breaks when exported due to Supabase types
const workspaceProcedure = t.procedure.use(middleware);

// Required workaround that breaks queryOptions/mutationOptions
export const workspaceProcedure = workspaceProcedure as any;

3. Usage (Fails)

// hooks/use-data.ts
import { useQuery } from "@tanstack/react-query";
import { trpc } from "./trpc-client";

export function useData() {
  // ❌ TypeScript error: Property 'queryOptions' does not exist
  const { data } = useQuery(trpc.posts.list.queryOptions({}));
  return data;
}

Attempted Solutions

1. Alternative Import Path

// Doesn't exist
import { createTRPCOptionsProxy } from "@trpc/tanstack-react-query/create-options-proxy";

2. Classic tRPC React Query

// Works but defeats the purpose of Tanstack integration
import { createTRPCReact } from "@trpc/react-query";
const trpc = createTRPCReact<AppRouter>();
// Use trpc.posts.list.useQuery() instead of native useQuery

Questions

Is there a way to make Supabase User types portable in TypeScript exports?
Are there specific tsconfig.json settings needed for @trpc/tanstack-react-query?
Is there a workaround to preserve type information while using the Tanstack integration?

Additional Context

This occurs in a Next.js App Router setup
The issue only appears when tRPC procedures use Supabase auth context
The classic @trpc/react-query works fine but we specifically need the Tanstack integration
Monorepo setup with tRPC in a workspace package

Success Criteria

trpc.procedure.queryOptions() and trpc.procedure.mutationOptions() methods exist
Full TypeScript support without any casts
Compatibility with Supabase auth types EOF < /dev/null

lassiter/trpc-tanstack-issue.md