Skip to content

tRPC v12 isn’t on npm yet. The @trpc12/* packages on this site can’t be installed until it’s released. Use v11 today

tRPC

ExperimentalTanStack Query beyond React might change or go away in any release. Stability

Vue

@trpc12/experimental-tanstack-vue-query: a Vue plugin or provideTrpc() for the client, useTrpc() in setup, and useSubscription with refs.

On this page

@trpc12/experimental-tanstack-vue-query re-exports @trpc12/tanstack-query and adds an app plugin (or provideTrpc()) that provides a client and its helpers, and a useSubscription that returns refs.

Not on npm yet
pnpm add @trpc12/trpc effect @trpc12/experimental-tanstack-vue-query @tanstack/vue-query
npm install @trpc12/trpc effect @trpc12/experimental-tanstack-vue-query @tanstack/vue-query
yarn add @trpc12/trpc effect @trpc12/experimental-tanstack-vue-query @tanstack/vue-query
bun add @trpc12/trpc effect @trpc12/experimental-tanstack-vue-query @tanstack/vue-query

The examples/experimental/framework-matrix app has a page per adapter (Vue, Solid and Svelte) on one server.

Provide the client

createTrpcContext takes the type of the function that makes the client (or of the client, or the router), so the helpers get what its links declare. Install its plugin next to VueQueryPlugin:

// trpc.ts
const 
const makeClient: () => TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>
makeClient = () =>
  
createTrpcClient<RouterType<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}>, readonly [...]>(opts: TypedClientOptions<...>): TrpcClient<...>
createTrpcClient({
    
TypedClientOptions<RouterType<{ post: { byId: Procedure<{ type: "query"; ctx: Context; meta: {}; input: { id: string; }; output: Post; errors: TrpcError<"NOT_FOUND", { id: string; }> | SchemaValidationError<ZodObject<{ id: ZodString; }, $strip>>; services: never; }>; list: Procedure<...>; create: Procedure<...>; }; }>, readonly [...]>.router: RouterType<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}>
router: 
routerType<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}>(): RouterType<...>
routerType<
type AppRouter = {
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}
AppRouter>(),
    
TypedClientOptions<RouterType<{ post: { byId: Procedure<{ type: "query"; ctx: Context; meta: {}; input: { id: string; }; output: Post; errors: TrpcError<"NOT_FOUND", { id: string; }> | SchemaValidationError<ZodObject<{ id: ZodString; }, $strip>>; services: never; }>; list: Procedure<...>; create: Procedure<...>; }; }>, readonly [...]>.links: readonly [TrpcLink<{
    form: JsonForm;
    provides: "response";
    builtinErrors: "NETWORK_ERROR" | "BAD_RESPONSE" | "STREAM_INTERRUPTED";
}, any>]
links: [
httpLink<{
    url: string;
}>(opts: {
    url: string;
}): TrpcLink<{
    form: JsonForm;
    provides: "response";
    builtinErrors: "NETWORK_ERROR" | "BAD_RESPONSE" | "STREAM_INTERRUPTED";
}, any>
httpLink({ url: stringurl: '/trpc' })],
  });
export const { 
const TrpcPlugin: Plugin<[TrpcPluginOptions<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, LinksTypes<...>>]>
TrpcPlugin, 
const useTrpc: () => TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, LinksTypes<...>>
useTrpc, 
const useTrpcClient: () => TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>
useTrpcClient } =
  
createTrpcContext<() => TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>>(opts?: TrpcContextOptions): TrpcVueContext<...>
createTrpcContext<typeof 
const makeClient: () => TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>
makeClient>();

// main.ts
function createApp(rootComponent: Component, rootProps?: Data | null): App<Element>createApp(const App: ComponentApp)
  .App<Element>.use<[options?: VueQueryPluginOptions | undefined]>(plugin: Plugin<[options?: VueQueryPluginOptions | undefined], [options?: VueQueryPluginOptions | undefined]>, ...options: NoInfer<[options?: VueQueryPluginOptions | undefined]>): App<Element> (+1 overload)use(
const VueQueryPlugin: {
    install: (app: any, options?: VueQueryPluginOptions) => void;
}
VueQueryPlugin)
  .
App<Element>.use<[TrpcPluginOptions<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, LinksTypes<...>>]>(plugin: Plugin<...>, ...options: NoInfer<[...]>): App<...> (+1 overload)
use(
const TrpcPlugin: Plugin<[TrpcPluginOptions<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, LinksTypes<...>>]>
TrpcPlugin, { 
TrpcPluginOptions<{ post: { byId: Procedure<{ type: "query"; ctx: Context; meta: {}; input: { id: string; }; output: Post; errors: TrpcError<"NOT_FOUND", { id: string; }> | SchemaValidationError<ZodObject<{ id: ZodString; }, $strip>>; services: never; }>; list: Procedure<...>; create: Procedure<...>; }; }, {}, LinksTypes<...>>.client: TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>
client: 
const makeClient: () => TrpcClient<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, undefined, LinksTypes<...>>
makeClient() })
  .App<Element>.mount(rootContainer: string | Element, isHydrate?: boolean, namespace?: boolean | ElementNamespace, vnode?: VNode): ComponentPublicInstancemount('#app');

provideTrpc(client) provides it to one component's descendants instead, for a client per subtree or per test. useTrpcClient() returns the client itself, for calls outside TanStack Query.

Queries and mutations

Pass a getter to useQuery, so the options follow reactive input; a new input is a new key:

// in <script setup>
const 
const trpc: TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, {}>
trpc = 
const useTrpc: () => TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, {}>
useTrpc();
const const queryClient: QueryClient$1queryClient = function useQueryClient(id?: string): QueryClient$1useQueryClient();
const const id: Ref<string, string>id = ref<string>(value: string): Ref<string, string> (+1 overload)ref('1');

const 
const post: UseQueryReturnType<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", {
    id: string;
}> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<ZodObject<{
    id: ZodString;
}, $strip>>> & {
    readonly defined: true;
}) | (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
post = 
useQuery<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", {
    id: string;
}> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<ZodObject<{
    id: ZodString;
}, $strip>>> & {
    readonly defined: true;
}) | (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
    readonly defined: false;
})>, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, TrpcQueryKey & {
    ...;
}>(options: MaybeRefOrGetter<...>, queryClient?: QueryClient$1): UseQueryReturnType<...> (+2 overloads)
useQuery(() =>
  
const trpc: TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, {}>
trpc.
post: TrpcQueryUtils<ClientRouter<{
    byId: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: {
            id: string;
        };
        output: Post;
        errors: TrpcError<"NOT_FOUND", {
            id: string;
        }> | SchemaValidationError<ZodObject<{
            id: ZodString;
        }, $strip>>;
        services: never;
    }>;
    list: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: undefined;
        output: Post[];
        errors: never;
        services: never;
    }>;
    create: Procedure<{
        type: "mutation";
        ctx: Context;
        meta: {};
        input: {
            title: string;
        };
        output: Post;
        errors: TrpcError<...> | SchemaValidationError<...>;
        services: never;
    }>;
}, {}, undefined, {}>>
post.
byId: QueryProcedureUtils<{
    id: string;
}, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", {
    id: string;
}> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<ZodObject<{
    id: ZodString;
}, $strip>>> & {
    readonly defined: true;
}) | (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
    readonly defined: false;
})>, Omit<...>>
byId.
QueryProcedureUtils<{ id: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", { id: string; }> & { ...; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.queryOptions<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}>(opts: {
    input: {
        id: string;
    } | unique symbol;
} & ContextBag<Omit<NonNullable<{
    signal?: AbortSignal | undefined;
} & BuiltinCallOptions>, "signal" | "lastEventId">> & QueryOptionsIn<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", {
    id: string;
}> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<ZodObject<{
    id: ZodString;
}, $strip>>> & {
    ...;
}) | ... 24 more ... | (TrpcError<...> & {
    ...;
})>, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}>): QueryOptionsOut<...> (+1 overload)
queryOptions({ 
input: {
    id: string;
} | unique symbol
input: { id: stringid: const id: Ref<string, string>id.Ref<string, string>.value: stringvalue } }),
);

const post: UseQueryReturnType<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", {
    id: string;
}> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<ZodObject<{
    id: ZodString;
}, $strip>>> & {
    readonly defined: true;
}) | (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
post.
data: Ref<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}> | Ref<undefined, undefined>
data.
Ref<T = any, S = T>.value: {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
} | undefined
value?.title;
                 
title: string | undefined
const 
const create: UseMutationReturnType<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    ...;
}), {
    ...;
}, undefined, MutationResult<...>>
create = 
useMutation<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    ...;
}), {
    ...;
}, undefined>(options: UseMutationOptions<...>, queryClient?: QueryClient$1): UseMutationReturnType<...>
useMutation(
  
const trpc: TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, {}>
trpc.
post: TrpcQueryUtils<ClientRouter<{
    byId: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: {
            id: string;
        };
        output: Post;
        errors: TrpcError<"NOT_FOUND", {
            id: string;
        }> | SchemaValidationError<ZodObject<{
            id: ZodString;
        }, $strip>>;
        services: never;
    }>;
    list: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: undefined;
        output: Post[];
        errors: never;
        services: never;
    }>;
    create: Procedure<{
        type: "mutation";
        ctx: Context;
        meta: {};
        input: {
            title: string;
        };
        output: Post;
        errors: TrpcError<...> | SchemaValidationError<...>;
        services: never;
    }>;
}, {}, undefined, {}>>
post.
create: MutationProcedureUtils<{
    ...;
}, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<...>, Omit<...>>
create.
MutationProcedureUtils<{ title: string; }, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", undefined> & { ...; }) | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.mutationOptions<undefined>(opts?: (ContextBag<Omit<NonNullable<{
    signal?: AbortSignal | undefined;
} & BuiltinCallOptions>, "signal" | "lastEventId">> & MutationOptionsIn<{
    title: string;
}, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"NOT_FOUND", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | ... 23 more ... | (TrpcError<...> & {
    ...;
})>, undefined>) | undefined): MutationOptionsOut<...>
mutationOptions({
    
onSuccess?: ((data: {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, variables: {
    title: string;
}, onMutateResult: undefined, context: MutationFunctionContext) => Promise<unknown> | unknown) | undefined
onSuccess: () => const queryClient: QueryClient$1queryClient.QueryClient$1.invalidateQueries<TrpcQueryKey>(filters?: InvalidateQueryFilters<TrpcQueryKey> | (() => InvalidateQueryFilters<TrpcQueryKey>) | undefined, options?: MaybeRefDeep<InvalidateOptions>): Promise<void>invalidateQueries(
const trpc: TrpcQueryUtilsFor<{
    post: {
        byId: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: {
                id: string;
            };
            output: Post;
            errors: TrpcError<"NOT_FOUND", {
                id: string;
            }> | SchemaValidationError<ZodObject<{
                id: ZodString;
            }, $strip>>;
            services: never;
        }>;
        list: Procedure<{
            type: "query";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post[];
            errors: never;
            services: never;
        }>;
        create: Procedure<{
            type: "mutation";
            ctx: Context;
            meta: {};
            input: {
                title: string;
            };
            output: Post;
            errors: TrpcError<...> | SchemaValidationError<...>;
            services: never;
        }>;
    };
}, {}, {}>
trpc.
post: TrpcQueryUtils<ClientRouter<{
    byId: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: {
            id: string;
        };
        output: Post;
        errors: TrpcError<"NOT_FOUND", {
            id: string;
        }> | SchemaValidationError<ZodObject<{
            id: ZodString;
        }, $strip>>;
        services: never;
    }>;
    list: Procedure<{
        type: "query";
        ctx: Context;
        meta: {};
        input: undefined;
        output: Post[];
        errors: never;
        services: never;
    }>;
    create: Procedure<{
        type: "mutation";
        ctx: Context;
        meta: {};
        input: {
            title: string;
        };
        output: Post;
        errors: TrpcError<...> | SchemaValidationError<...>;
        services: never;
    }>;
}, {}, undefined, {}>>
post.
PathUtils.pathFilter(filters?: QueryFiltersIn): QueryFiltersIn & {
    queryKey: TrpcQueryKey;
}
pathFilter()),
  }),
);

Subscriptions

useSubscription subscribes while the component is mounted (or the effect scope is active) and returns refs: status, data (the latest event) and error, with reset(). Pass a getter or a ref, and a new input restarts it:

const const channel: Ref<string, string>channel = ref<string>(value: string): Ref<string, string> (+1 overload)ref('general');
const 
const added: UseSubscriptionReturn<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
added = 
useSubscription<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>(options: MaybeRefOrGetter<...>): UseSubscriptionReturn<...>
useSubscription(() =>
  
const trpc: TrpcQueryUtilsFor<{
    post: {
        onAdd: Procedure<{
            type: "subscription";
            ctx: Context;
            meta: {};
            input: {
                channel: string;
            };
            output: TrackedEnvelope<Post>;
            errors: SchemaValidationError<z.ZodObject<{
                channel: z.ZodString;
            }, z.core.$strip>>;
            services: never;
        }>;
    };
}, {}, {}>
trpc.
post: TrpcQueryUtils<ClientRouter<{
    onAdd: Procedure<{
        type: "subscription";
        ctx: Context;
        meta: {};
        input: {
            channel: string;
        };
        output: TrackedEnvelope<Post>;
        errors: SchemaValidationError<z.ZodObject<{
            channel: z.ZodString;
        }, z.core.$strip>>;
        services: never;
    }>;
}, {}, undefined, {}>>
post.
onAdd: SubscriptionProcedureUtils<{
    channel: string;
}, {
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    readonly defined: false;
})>, Omit<...>>
onAdd.
SubscriptionProcedureUtils<{ channel: string; }, { readonly id: string; readonly data: { id: string; title: string; author: string | null; createdAt: string; }; }, NonNullable<UndeclaredError | ... 25 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.subscriptionOptions(opts: {
    input: {
        channel: string;
    } | unique symbol;
} & ContextBag<Omit<NonNullable<{
    signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {
    lastEventId?: string | undefined;
}>, "signal" | "lastEventId">> & {
    enabled?: boolean | undefined;
} & SubscriptionCallbacks<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    ...;
}) | ... 24 more ... | (TrpcError<...> & {
    ...;
})>>): TrpcSubscriptionOptions<...>
subscriptionOptions({ 
input: {
    channel: string;
} | unique symbol
input: { channel: stringchannel: const channel: Ref<string, string>channel.Ref<string, string>.value: stringvalue } }),
);
const const latest: ComputedRef<string | undefined>latest = computed<string | undefined>(getter: ComputedGetter<string | undefined>, debugOptions?: DebuggerOptions): ComputedRef<string | undefined> (+1 overload)computed(() =>
  
const added: UseSubscriptionReturn<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
added.UseSubscriptionReturn<{ readonly id: string; readonly data: { id: string; title: string; author: string | null; createdAt: string; }; }, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<...>> & { ...; }) | ... 24 more ... | (TrpcError<...> & { ...; })>>.status: ComputedRef<SubscriptionStatus>status.ComputedRef<SubscriptionStatus>.value: SubscriptionStatusvalue === 'connecting'
    ? 'Connecting…'
    : 
const added: UseSubscriptionReturn<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
}, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<z.ZodObject<{
    channel: z.ZodString;
}, z.core.$strip>>> & {
    readonly defined: true;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | ... 21 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
added.
UseSubscriptionReturn<{ readonly id: string; readonly data: { id: string; title: string; author: string | null; createdAt: string; }; }, NonNullable<UndeclaredError | (TrpcError<"BAD_REQUEST", SchemaInputErrorData<...>> & { ...; }) | ... 24 more ... | (TrpcError<...> & { ...; })>>.data: ComputedRef<{
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
} | undefined>
data.
ComputedRef<{ readonly id: string; readonly data: { id: string; title: string; author: string | null; createdAt: string; }; } | undefined>.value: {
    readonly id: string;
    readonly data: {
        id: string;
        title: string;
        author: string | null;
        createdAt: string;
    };
} | undefined
value?.
data: {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}
data.title: string | undefinedtitle,
);

What subscriptions share, and the query-cache forms (liveOptions(), streamedOptions()), are in Subscriptions.