@trpc/next/dist/index.mjs

The tRPC Next.js library

import { t as _objectSpread2 } from "./objectSpread2-Dh4InpQf.mjs";
import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
import { getTransformer } from "@trpc/client/unstable-internals";
import { createReactDecoration, createReactQueryUtils, createRootHooks, getQueryClient } from "@trpc/react-query/shared";
import React, { useMemo, useState } from "react";
import { createFlatProxy } from "@trpc/server/unstable-core-do-not-import";
//#region src/withTRPC.tsx
/**
* Wraps a Next.js app or page with the tRPC and TanStack Query providers.
* `createTRPCNext` returns it, and you wrap your app with it:
* `export default trpc.withTRPC(MyApp)`.
*
* @deprecated built on `@trpc/react-query`, which only gets bug fixes. Mount
* `TRPCProvider` from `@trpc/tanstack-react-query` in `_app` instead.
* @see https://trpc.io/docs/client/nextjs/pages-router/setup#moving-from-createtrpcnext
*/
function withTRPC(opts) {
	const { config: getClientConfig } = opts;
	const transformer = getTransformer(opts.transformer);
	return (AppOrPage) => {
		var _ref, _AppOrPage$displayNam;
		const trpc = createRootHooks(opts);
		const WithTRPC = (props) => {
			var _props$pageProps, _abortOnUnmount;
			const [prepassProps] = useState(() => {
				if (props.trpc) return props.trpc;
				const config = getClientConfig({});
				const queryClient = getQueryClient(config);
				const trpcClient = trpc.createClient(config);
				return {
					abortOnUnmount: config.abortOnUnmount,
					queryClient,
					trpcClient,
					ssrState: opts.ssr ? "mounting" : false,
					ssrContext: null
				};
			});
			const { queryClient, trpcClient, ssrState, ssrContext } = prepassProps;
			const trpcState = (_props$pageProps = props.pageProps) === null || _props$pageProps === void 0 ? void 0 : _props$pageProps.trpcState;
			const hydratedState = React.useMemo(() => {
				if (!trpcState) return trpcState;
				return transformer.input.deserialize(trpcState);
			}, [trpcState]);
			return /* @__PURE__ */ React.createElement(trpc.Provider, {
				abortOnUnmount: (_abortOnUnmount = prepassProps.abortOnUnmount) !== null && _abortOnUnmount !== void 0 ? _abortOnUnmount : false,
				client: trpcClient,
				queryClient,
				ssrState,
				ssrContext
			}, /* @__PURE__ */ React.createElement(QueryClientProvider, { client: queryClient }, /* @__PURE__ */ React.createElement(HydrationBoundary, { state: hydratedState }, /* @__PURE__ */ React.createElement(AppOrPage, props))));
		};
		if (opts.ssr) opts.ssrPrepass({
			parent: opts,
			AppOrPage,
			WithTRPC
		});
		else if (AppOrPage.getInitialProps) WithTRPC.getInitialProps = async (appOrPageCtx) => {
			var _originalProps$pagePr;
			const isApp = !!appOrPageCtx.Component;
			let pageProps = {};
			const originalProps = await AppOrPage.getInitialProps(appOrPageCtx);
			const originalPageProps = isApp ? (_originalProps$pagePr = originalProps.pageProps) !== null && _originalProps$pagePr !== void 0 ? _originalProps$pagePr : {} : originalProps;
			pageProps = _objectSpread2(_objectSpread2({}, originalPageProps), pageProps);
			const getAppTreeProps = (props) => isApp ? { pageProps: props } : props;
			return getAppTreeProps(pageProps);
		};
		WithTRPC.displayName = `withTRPC(${(_ref = (_AppOrPage$displayNam = AppOrPage.displayName) !== null && _AppOrPage$displayNam !== void 0 ? _AppOrPage$displayNam : AppOrPage.name) !== null && _ref !== void 0 ? _ref : "Component"})`;
		return WithTRPC;
	};
}
//#endregion
//#region src/createTRPCNext.tsx
/* istanbul ignore file -- @preserve */
/**
* Creates typed React hooks and a `withTRPC` wrapper for a Next.js Pages Router app.
*
* @example
* ```ts
* export const trpc = createTRPCNext<AppRouter>({
*   config() {
*     return { links: [httpBatchLink({ url: '/api/trpc' })] };
*   },
* });
* ```
*
* @deprecated built on `@trpc/react-query`, which only gets bug fixes. Use
* `createTRPCContext` from `@trpc/tanstack-react-query` instead.
* @see https://trpc.io/docs/client/nextjs/pages-router/setup#moving-from-createtrpcnext
*/
function createTRPCNext(opts) {
	const hooks = createRootHooks(opts);
	const _withTRPC = withTRPC(opts);
	const proxy = createReactDecoration(hooks);
	return createFlatProxy((key) => {
		if (key === "useContext" || key === "useUtils") return () => {
			const context = hooks.useUtils();
			return useMemo(() => {
				return createReactQueryUtils(context);
			}, [context]);
		};
		if (key === "useQueries") return hooks.useQueries;
		if (key === "useSuspenseQueries") return hooks.useSuspenseQueries;
		if (key === "withTRPC") return _withTRPC;
		return proxy[key];
	});
}
//#endregion
export { createTRPCNext, withTRPC };

//# sourceMappingURL=index.mjs.map