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

Preact

@trpc12/experimental-tanstack-preact-query: a context provider for the client, useTrpc() in components, and useSubscription.

On this page

@trpc12/experimental-tanstack-preact-query re-exports @trpc12/tanstack-query and adds a context for a client and its helpers, and a useSubscription hook. It works as the React package does, with Preact's hooks.

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

Provide the client

An app with one client can call createTrpcQueryUtils({ client }) in a module and import the helpers. For a client per request or per test, 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. It returns [TrpcProvider, useTrpc, useTrpcClient, context], to name as you like; render the provider inside QueryClientProvider:

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 TrpcProvider: (props: TrpcProviderProps<{
    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<...>>) => VNode<any>
TrpcProvider, 
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] = 
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): TrpcPreactContext<...>
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>();

const const queryClient: QueryClientqueryClient = new new QueryClient(config?: QueryClientConfig): QueryClientQueryClient();
const 
const 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();

export const 
const Providers: (props: {
    children: ComponentChildren;
}) => JSXInternal.Element
Providers = (
props: {
    children: ComponentChildren;
}
props: { children: ComponentChildrenchildren: type ComponentChildren = ComponentChild[] | ComponentChildComponentChildren }) => (
  <const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => VNodeQueryClientProvider client: QueryClientclient={const queryClient: QueryClientqueryClient}>
    <
const TrpcProvider: (props: TrpcProviderProps<{
    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<...>>) => VNode<any>
TrpcProvider 
TrpcProviderProps<{ 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 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}>{
props: {
    children: ComponentChildren;
}
props.children: ComponentChildrenchildren}</
const TrpcProvider: (props: TrpcProviderProps<{
    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<...>>) => VNode<any>
TrpcProvider>
  </const QueryClientProvider: ({ client, children }: QueryClientProviderProps) => VNodeQueryClientProvider>
);

function 
function Post(props: {
    id: string;
}): JSXInternal.Element
Post(
props: {
    id: string;
}
props: { id: stringid: string }) {
  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;
        }>;
    };
}, {}, LinksTypes<...>>
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;
        }>;
    };
}, {}, LinksTypes<...>>
useTrpc();
  const 
const post: UseQueryResult<{
    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: UndefinedInitialDataOptions<...>, queryClient?: QueryClient): UseQueryResult<...> (+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;
        }>;
    };
}, {}, LinksTypes<...>>
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, LinksTypes<...>>>
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: 
props: {
    id: string;
}
props.id: stringid } }),
  );
  return <JSXInternal.IntrinsicElements.h1: JSXInternal.HTMLAttributes<HTMLHeadingElement>h1>{
const post: UseQueryResult<{
    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: {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
} | undefined
data?.title: string | undefinedtitle}</JSXInternal.IntrinsicElements.h1: JSXInternal.HTMLAttributes<HTMLHeadingElement>h1>;
}

The fourth item is the Preact context itself, for bridging it into another render tree: read it with useContext, then provide that value on the other side.

Subscriptions

useSubscription subscribes while the component is mounted, with status, data (the latest event), error and reset(). A new input or enabled restarts it; callbacks can change freely:

function function NewPosts(): JSXInternal.ElementNewPosts() {
  const 
const trpc: TrpcQueryUtilsFor<{
    post: {
        onAdd: Procedure<{
            type: "subscription";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post;
            errors: never;
            services: never;
        }>;
    };
}, {}, {}>
trpc = 
const useTrpc: () => TrpcQueryUtilsFor<{
    post: {
        onAdd: Procedure<{
            type: "subscription";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post;
            errors: never;
            services: never;
        }>;
    };
}, {}, {}>
useTrpc();
  const 
const sub: UseSubscriptionResult<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 19 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
sub = 
useSubscription<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 19 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>(options: TrpcSubscriptionOptions<...>): UseSubscriptionResult<...>
useSubscription(
const trpc: TrpcQueryUtilsFor<{
    post: {
        onAdd: Procedure<{
            type: "subscription";
            ctx: Context;
            meta: {};
            input: undefined;
            output: Post;
            errors: never;
            services: never;
        }>;
    };
}, {}, {}>
trpc.
post: TrpcQueryUtils<ClientRouter<{
    onAdd: Procedure<{
        type: "subscription";
        ctx: Context;
        meta: {};
        input: undefined;
        output: Post;
        errors: never;
        services: never;
    }>;
}, {}, undefined, {}>>
post.
onAdd: SubscriptionProcedureUtils<undefined, {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 19 more ... | (TrpcError<...> & {
    readonly defined: false;
})>, Omit<...>>
onAdd.
SubscriptionProcedureUtils<undefined, { id: string; title: string; author: string | null; createdAt: string; }, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & { ...; }) | ... 23 more ... | (TrpcError<...> & { ...; })>, Omit<...>>.subscriptionOptions(opts?: ({
    input?: unique symbol | undefined;
} & ContextBag<Omit<NonNullable<{
    signal?: AbortSignal | undefined;
} & BuiltinCallOptions & {
    lastEventId?: string | undefined;
}>, "signal" | "lastEventId">> & {
    enabled?: boolean | undefined;
} & SubscriptionCallbacks<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | ... 22 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>) | undefined): TrpcSubscriptionOptions<...>
subscriptionOptions());
  return <JSXInternal.IntrinsicElements.p: JSXInternal.HTMLAttributes<HTMLParagraphElement>p>{
const sub: UseSubscriptionResult<{
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
}, NonNullable<UndeclaredError | (TrpcError<"PARSE_ERROR", undefined> & {
    readonly defined: false;
}) | (TrpcError<"BAD_REQUEST", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNSUPPORTED_PROTOCOL", undefined> & {
    readonly defined: false;
}) | (TrpcError<"UNAUTHORIZED", undefined> & {
    readonly defined: false;
}) | (TrpcError<"PAYMENT_REQUIRED", undefined> & {
    readonly defined: false;
}) | ... 19 more ... | (TrpcError<...> & {
    readonly defined: false;
})>>
sub.
data: {
    id: string;
    title: string;
    author: string | null;
    createdAt: string;
} | undefined
data?.title: string | undefinedtitle}</JSXInternal.IntrinsicElements.p: JSXInternal.HTMLAttributes<HTMLParagraphElement>p>;
}

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