@trpc/tanstack-react-query 0.0.0-alpha.0

package/dist/internals/subscriptionOptions.mjs

@@ -0,0 +1,151 @@
+import { hashKey, skipToken } from '@tanstack/react-query';
+import * as React from 'react';
+import { createTRPCOptionsResult } from './utils.mjs';
+
+const trpcSubscriptionOptions = (args)=>{
+    const { subscribe, path, queryKey, opts } = args;
+    const input = queryKey[1]?.input;
+    const enabled = opts?.enabled ?? input !== skipToken;
+    const _subscribe = (innerOpts)=>{
+        return subscribe(path.join('.'), input ?? undefined, innerOpts);
+    };
+    return {
+        ...opts,
+        enabled,
+        subscribe: _subscribe,
+        queryKey,
+        trpc: createTRPCOptionsResult({
+            path
+        })
+    };
+};
+function useSubscription(opts) {
+    const optsRef = React.useRef(opts);
+    optsRef.current = opts;
+    const trackedProps = React.useRef(new Set([]));
+    const addTrackedProp = React.useCallback((key)=>{
+        trackedProps.current.add(key);
+    }, []);
+    const currentSubscriptionRef = React.useRef();
+    const reset = React.useCallback(()=>{
+        // unsubscribe from the previous subscription
+        currentSubscriptionRef.current?.();
+        updateState(getInitialState);
+        if (!opts.enabled) {
+            return;
+        }
+        let isStopped = false;
+        const subscription = opts.subscribe({
+            onStarted: ()=>{
+                if (!isStopped) {
+                    optsRef.current.onStarted?.();
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'pending',
+                            error: null
+                        }));
+                }
+            },
+            onData: (data)=>{
+                if (!isStopped) {
+                    optsRef.current.onData?.(data);
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'pending',
+                            data,
+                            error: null
+                        }));
+                }
+            },
+            onError: (error)=>{
+                if (!isStopped) {
+                    optsRef.current.onError?.(error);
+                    updateState((prev)=>({
+                            ...prev,
+                            status: 'error',
+                            error
+                        }));
+                }
+            },
+            onConnectionStateChange: (result)=>{
+                const delta = {
+                    status: result.state,
+                    error: result.error
+                };
+                updateState((prev)=>{
+                    return {
+                        ...prev,
+                        ...delta
+                    };
+                });
+            }
+        });
+        currentSubscriptionRef.current = ()=>{
+            isStopped = true;
+            subscription.unsubscribe();
+        };
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [
+        hashKey(opts.queryKey),
+        opts.enabled
+    ]);
+    const getInitialState = React.useCallback(()=>{
+        return opts.enabled ? {
+            data: undefined,
+            error: null,
+            status: 'connecting',
+            reset
+        } : {
+            data: undefined,
+            error: null,
+            status: 'idle',
+            reset
+        };
+    }, [
+        opts.enabled,
+        reset
+    ]);
+    const resultRef = React.useRef(getInitialState());
+    const [state, setState] = React.useState(trackResult(resultRef.current, addTrackedProp));
+    state.reset = reset;
+    const updateState = React.useCallback((callback)=>{
+        const prev = resultRef.current;
+        const next = resultRef.current = callback(prev);
+        let shouldUpdate = false;
+        for (const key of trackedProps.current){
+            if (prev[key] !== next[key]) {
+                shouldUpdate = true;
+                break;
+            }
+        }
+        if (shouldUpdate) {
+            setState(trackResult(next, addTrackedProp));
+        }
+    }, [
+        addTrackedProp
+    ]);
+    React.useEffect(()=>{
+        if (!opts.enabled) {
+            return;
+        }
+        reset();
+        return ()=>{
+            currentSubscriptionRef.current?.();
+        };
+    }, [
+        reset,
+        opts.enabled
+    ]);
+    return state;
+}
+function trackResult(result, onTrackResult) {
+    const trackedResult = new Proxy(result, {
+        get (target, prop) {
+            onTrackResult(prop);
+            return target[prop];
+        }
+    });
+    return trackedResult;
+}
+
+export { trpcSubscriptionOptions, useSubscription };

package/dist/internals/types.d.ts

@@ -0,0 +1,41 @@
+import type { TRPCRequestOptions } from '@trpc/client';
+export type ResolverDef = {
+    input: any;
+    output: any;
+    transformer: boolean;
+    errorShape: any;
+};
+export type ExtractCursorType<TInput> = TInput extends {
+    cursor?: any;
+} ? TInput['cursor'] : unknown;
+export interface TRPCReactRequestOptions extends Omit<TRPCRequestOptions, 'signal'> {
+    /**
+     * Opt out of SSR for this query by passing `ssr: false`
+     */
+    ssr?: boolean;
+    /**
+     * Opt out or into aborting request on unmount
+     */
+    abortOnUnmount?: boolean;
+}
+export interface TRPCQueryBaseOptions {
+    /**
+     * tRPC-related options
+     */
+    trpc?: TRPCReactRequestOptions;
+}
+export interface TRPCQueryOptionsResult {
+    trpc: {
+        path: string;
+    };
+}
+export type QueryType = 'any' | 'infinite' | 'query';
+export type TRPCQueryKey = [
+    readonly string[],
+    {
+        input?: unknown;
+        type?: Exclude<QueryType, 'any'>;
+    }?
+];
+export type TRPCMutationKey = [readonly string[]];
+//# sourceMappingURL=types.d.ts.map

package/dist/internals/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/internals/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAEvD,MAAM,MAAM,WAAW,GAAG;IACxB,KAAK,EAAE,GAAG,CAAC;IACX,MAAM,EAAE,GAAG,CAAC;IACZ,WAAW,EAAE,OAAO,CAAC;IACrB,UAAU,EAAE,GAAG,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,iBAAiB,CAAC,MAAM,IAAI,MAAM,SAAS;IAAE,MAAM,CAAC,EAAE,GAAG,CAAA;CAAE,GACnE,MAAM,CAAC,QAAQ,CAAC,GAChB,OAAO,CAAC;AAEZ,MAAM,WAAW,uBAEf,SAAQ,IAAI,CAAC,kBAAkB,EAAE,QAAQ,CAAC;IAC1C;;OAEG;IACH,GAAG,CAAC,EAAE,OAAO,CAAC;IACd;;OAEG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED,MAAM,WAAW,oBAAoB;IACnC;;OAEG;IACH,IAAI,CAAC,EAAE,uBAAuB,CAAC;CAChC;AAED,MAAM,WAAW,sBAAsB;IACrC,IAAI,EAAE;QACJ,IAAI,EAAE,MAAM,CAAC;KACd,CAAC;CACH;AAED,MAAM,MAAM,SAAS,GAAG,KAAK,GAAG,UAAU,GAAG,OAAO,CAAC;AAErD,MAAM,MAAM,YAAY,GAAG;IACzB,SAAS,MAAM,EAAE;IACjB;QAAE,KAAK,CAAC,EAAE,OAAO,CAAC;QAAC,IAAI,CAAC,EAAE,OAAO,CAAC,SAAS,EAAE,KAAK,CAAC,CAAA;KAAE,CAAC;CACvD,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,CAAC,SAAS,MAAM,EAAE,CAAC,CAAC"}

package/dist/internals/utils.d.ts

@@ -0,0 +1,28 @@
+import { type QueryClient } from '@tanstack/react-query';
+import type { QueryType, TRPCMutationKey, TRPCQueryKey, TRPCQueryOptionsResult } from './types';
+/**
+ * @internal
+ */
+export declare function createTRPCOptionsResult(value: {
+    path: readonly string[];
+}): TRPCQueryOptionsResult['trpc'];
+/**
+ * @internal
+ */
+export declare function getClientArgs<TOptions>(queryKey: TRPCQueryKey, opts: TOptions, infiniteParams?: {
+    pageParam: any;
+    direction: 'forward' | 'backward';
+}): readonly [string, unknown, any];
+/**
+ * @internal
+ */
+export declare function buildQueryFromAsyncIterable(asyncIterable: AsyncIterable<unknown>, queryClient: QueryClient, queryKey: TRPCQueryKey): Promise<unknown[]>;
+/**
+ * To allow easy interactions with groups of related queries, such as
+ * invalidating all queries of a router, we use an array as the path when
+ * storing in tanstack query.
+ **/
+export declare function getQueryKeyInternal(path: readonly string[], input: unknown, type: QueryType): TRPCQueryKey;
+export declare function getMutationKeyInternal(path: readonly string[]): TRPCMutationKey;
+export declare function unwrapLazyArg<T>(valueOrLazy: T | (() => T)): T;
+//# sourceMappingURL=utils.d.ts.map

package/dist/internals/utils.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/internals/utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAa,KAAK,WAAW,EAAE,MAAM,uBAAuB,CAAC;AAEpE,OAAO,KAAK,EACV,SAAS,EACT,eAAe,EACf,YAAY,EACZ,sBAAsB,EACvB,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,wBAAgB,uBAAuB,CAAC,KAAK,EAAE;IAC7C,IAAI,EAAE,SAAS,MAAM,EAAE,CAAC;CACzB,GAAG,sBAAsB,CAAC,MAAM,CAAC,CAMjC;AAED;;GAEG;AACH,wBAAgB,aAAa,CAAC,QAAQ,EACpC,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,QAAQ,EACd,cAAc,CAAC,EAAE;IACf,SAAS,EAAE,GAAG,CAAC;IACf,SAAS,EAAE,SAAS,GAAG,UAAU,CAAC;CACnC,mCAYF;AAED;;GAEG;AACH,wBAAsB,2BAA2B,CAC/C,aAAa,EAAE,aAAa,CAAC,OAAO,CAAC,EACrC,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,YAAY,sBAsBvB;AAED;;;;IAII;AACJ,wBAAgB,mBAAmB,CACjC,IAAI,EAAE,SAAS,MAAM,EAAE,EACvB,KAAK,EAAE,OAAO,EACd,IAAI,EAAE,SAAS,GACd,YAAY,CA0Cd;AAED,wBAAgB,sBAAsB,CACpC,IAAI,EAAE,SAAS,MAAM,EAAE,GACtB,eAAe,CAKjB;AAED,wBAAgB,aAAa,CAAC,CAAC,EAAE,WAAW,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAC,GAAG,CAAC,CAE9D"}

package/dist/internals/utils.js

@@ -0,0 +1,112 @@
+'use strict';
+
+var reactQuery = require('@tanstack/react-query');
+var unstableCoreDoNotImport = require('@trpc/server/unstable-core-do-not-import');
+
+/**
+ * @internal
+ */ function createTRPCOptionsResult(value) {
+    const path = value.path.join('.');
+    return {
+        path
+    };
+}
+/**
+ * @internal
+ */ function getClientArgs(queryKey, opts, infiniteParams) {
+    const path = queryKey[0];
+    let input = queryKey[1]?.input;
+    if (infiniteParams) {
+        input = {
+            ...input ?? {},
+            ...infiniteParams.pageParam ? {
+                cursor: infiniteParams.pageParam
+            } : {},
+            direction: infiniteParams.direction
+        };
+    }
+    return [
+        path.join('.'),
+        input,
+        opts?.trpc
+    ];
+}
+/**
+ * @internal
+ */ async function buildQueryFromAsyncIterable(asyncIterable, queryClient, queryKey) {
+    const queryCache = queryClient.getQueryCache();
+    const query = queryCache.build(queryClient, {
+        queryKey
+    });
+    query.setState({
+        data: [],
+        status: 'success'
+    });
+    const aggregate = [];
+    for await (const value of asyncIterable){
+        aggregate.push(value);
+        query.setState({
+            data: [
+                ...aggregate
+            ]
+        });
+    }
+    return aggregate;
+}
+/**
+ * To allow easy interactions with groups of related queries, such as
+ * invalidating all queries of a router, we use an array as the path when
+ * storing in tanstack query.
+ **/ function getQueryKeyInternal(path, input, type) {
+    // Construct a query key that is easy to destructure and flexible for
+    // partial selecting etc.
+    // https://github.com/trpc/trpc/issues/3128
+    // some parts of the path may be dot-separated, split them up
+    const splitPath = path.flatMap((part)=>part.split('.'));
+    if (!input && (!type || type === 'any')) {
+        // this matches also all mutations (see `getMutationKeyInternal`)
+        // for `utils.invalidate()` to match all queries (including vanilla react-query)
+        // we don't want nested array if path is empty, i.e. `[]` instead of `[[]]`
+        return splitPath.length ? [
+            splitPath
+        ] : [];
+    }
+    if (type === 'infinite' && unstableCoreDoNotImport.isObject(input) && ('direction' in input || 'cursor' in input)) {
+        const { cursor: _, direction: __, ...inputWithoutCursorAndDirection } = input;
+        return [
+            splitPath,
+            {
+                input: inputWithoutCursorAndDirection,
+                type: 'infinite'
+            }
+        ];
+    }
+    return [
+        splitPath,
+        {
+            ...typeof input !== 'undefined' && input !== reactQuery.skipToken && {
+                input: input
+            },
+            ...type && type !== 'any' && {
+                type: type
+            }
+        }
+    ];
+}
+function getMutationKeyInternal(path) {
+    // some parts of the path may be dot-separated, split them up
+    const splitPath = path.flatMap((part)=>part.split('.'));
+    return splitPath.length ? [
+        splitPath
+    ] : [];
+}
+function unwrapLazyArg(valueOrLazy) {
+    return unstableCoreDoNotImport.isFunction(valueOrLazy) ? valueOrLazy() : valueOrLazy;
+}
+
+exports.buildQueryFromAsyncIterable = buildQueryFromAsyncIterable;
+exports.createTRPCOptionsResult = createTRPCOptionsResult;
+exports.getClientArgs = getClientArgs;
+exports.getMutationKeyInternal = getMutationKeyInternal;
+exports.getQueryKeyInternal = getQueryKeyInternal;
+exports.unwrapLazyArg = unwrapLazyArg;

package/dist/internals/utils.mjs

@@ -0,0 +1,105 @@
+import { skipToken } from '@tanstack/react-query';
+import { isObject, isFunction } from '@trpc/server/unstable-core-do-not-import';
+
+/**
+ * @internal
+ */ function createTRPCOptionsResult(value) {
+    const path = value.path.join('.');
+    return {
+        path
+    };
+}
+/**
+ * @internal
+ */ function getClientArgs(queryKey, opts, infiniteParams) {
+    const path = queryKey[0];
+    let input = queryKey[1]?.input;
+    if (infiniteParams) {
+        input = {
+            ...input ?? {},
+            ...infiniteParams.pageParam ? {
+                cursor: infiniteParams.pageParam
+            } : {},
+            direction: infiniteParams.direction
+        };
+    }
+    return [
+        path.join('.'),
+        input,
+        opts?.trpc
+    ];
+}
+/**
+ * @internal
+ */ async function buildQueryFromAsyncIterable(asyncIterable, queryClient, queryKey) {
+    const queryCache = queryClient.getQueryCache();
+    const query = queryCache.build(queryClient, {
+        queryKey
+    });
+    query.setState({
+        data: [],
+        status: 'success'
+    });
+    const aggregate = [];
+    for await (const value of asyncIterable){
+        aggregate.push(value);
+        query.setState({
+            data: [
+                ...aggregate
+            ]
+        });
+    }
+    return aggregate;
+}
+/**
+ * To allow easy interactions with groups of related queries, such as
+ * invalidating all queries of a router, we use an array as the path when
+ * storing in tanstack query.
+ **/ function getQueryKeyInternal(path, input, type) {
+    // Construct a query key that is easy to destructure and flexible for
+    // partial selecting etc.
+    // https://github.com/trpc/trpc/issues/3128
+    // some parts of the path may be dot-separated, split them up
+    const splitPath = path.flatMap((part)=>part.split('.'));
+    if (!input && (!type || type === 'any')) {
+        // this matches also all mutations (see `getMutationKeyInternal`)
+        // for `utils.invalidate()` to match all queries (including vanilla react-query)
+        // we don't want nested array if path is empty, i.e. `[]` instead of `[[]]`
+        return splitPath.length ? [
+            splitPath
+        ] : [];
+    }
+    if (type === 'infinite' && isObject(input) && ('direction' in input || 'cursor' in input)) {
+        const { cursor: _, direction: __, ...inputWithoutCursorAndDirection } = input;
+        return [
+            splitPath,
+            {
+                input: inputWithoutCursorAndDirection,
+                type: 'infinite'
+            }
+        ];
+    }
+    return [
+        splitPath,
+        {
+            ...typeof input !== 'undefined' && input !== skipToken && {
+                input: input
+            },
+            ...type && type !== 'any' && {
+                type: type
+            }
+        }
+    ];
+}
+function getMutationKeyInternal(path) {
+    // some parts of the path may be dot-separated, split them up
+    const splitPath = path.flatMap((part)=>part.split('.'));
+    return splitPath.length ? [
+        splitPath
+    ] : [];
+}
+function unwrapLazyArg(valueOrLazy) {
+    return isFunction(valueOrLazy) ? valueOrLazy() : valueOrLazy;
+}
+
+export { buildQueryFromAsyncIterable, createTRPCOptionsResult, getClientArgs, getMutationKeyInternal, getQueryKeyInternal, unwrapLazyArg };

package/package.json

@@ -0,0 +1,81 @@
+{
+  "name": "@trpc/tanstack-react-query",
+  "version": "0.0.0-alpha.0",
+  "description": "Tanstack React Query Integration for tRPC",
+  "author": "juliusmarminge",
+  "license": "MIT",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "typings": "dist/index.d.ts",
+  "homepage": "https://trpc.io",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/trpc/trpc.git",
+    "directory": "packages/tanstack-react-query"
+  },
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "README.md",
+    "package.json",
+    "!**/*.test.*",
+    "!**/__tests__"
+  ],
+  "eslintConfig": {
+    "rules": {
+      "react-hooks/exhaustive-deps": "error",
+      "no-restricted-imports": [
+        "error",
+        "@trpc/tanstack-react-query"
+      ],
+      "@typescript-eslint/prefer-function-type": "off"
+    }
+  },
+  "dependencies": {},
+  "peerDependencies": {
+    "@tanstack/react-query": "^5.59.15",
+    "@trpc/client": "10.45.1",
+    "@trpc/server": "^10.45.1",
+    "react": ">=18.2.0",
+    "react-dom": ">=18.2.0",
+    "typescript": ">=5.6.2"
+  },
+  "devDependencies": {
+    "@tanstack/react-query": "^5.59.15",
+    "@trpc/client": "10.45.1",
+    "@trpc/server": "^10.45.1",
+    "@types/node": "^20.10.0",
+    "@types/react": "^18.3.1",
+    "eslint": "^8.57.0",
+    "konn": "^0.7.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "rollup": "^4.9.5",
+    "tsx": "^4.0.0",
+    "typescript": "^5.6.2",
+    "vitest": "^2.0.4",
+    "zod": "^3.0.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "funding": [
+    "https://trpc.io/sponsor"
+  ],
+  "scripts": {
+    "build": "rollup --config rollup.config.ts --configPlugin rollup-plugin-swc3",
+    "dev": "pnpm build --watch",
+    "codegen-entrypoints": "tsx entrypoints.script.ts",
+    "lint": "eslint --cache src",
+    "test-run:tsc": "tsc --noEmit --pretty",
+    "ts-watch": "tsc --watch"
+  }
+}

package/src/index.ts

@@ -0,0 +1,25 @@
+export { createTRPCContext } from './internals/Context';
+export type {
+  TRPCOptionsProxy,
+  InferInput,
+  InferOutput,
+  DecorateMutationProcedure,
+  DecorateProcedure,
+  DecorateQueryKeyable,
+  DecorateQueryProcedure,
+  DecorateSubscriptionProcedure,
+} from './internals/createOptionsProxy';
+export type { TRPCQueryOptions } from './internals/queryOptions';
+export type { TRPCInfiniteQueryOptions } from './internals/infiniteQueryOptions';
+export type { TRPCMutationOptions } from './internals/mutationOptions';
+export type {
+  TRPCSubscriptionOptions,
+  TRPCSubscriptionStatus,
+  TRPCSubscriptionConnectingResult,
+  TRPCSubscriptionErrorResult,
+  TRPCSubscriptionIdleResult,
+  TRPCSubscriptionPendingResult,
+  TRPCSubscriptionResult,
+} from './internals/subscriptionOptions';
+export { createTRPCOptionsProxy } from './internals/createOptionsProxy';
+export { useSubscription } from './internals/subscriptionOptions';

package/src/internals/Context.tsx

@@ -0,0 +1,46 @@
+import { type QueryClient } from '@tanstack/react-query';
+import { type CreateTRPCClient } from '@trpc/client';
+import type { AnyRouter } from '@trpc/server/unstable-core-do-not-import';
+import * as React from 'react';
+import {
+  createTRPCOptionsProxy,
+  type TRPCOptionsProxy,
+} from './createOptionsProxy';
+
+export function createTRPCContext<TRouter extends AnyRouter>() {
+  const TRPCContext = React.createContext<TRPCOptionsProxy<TRouter> | null>(
+    null,
+  );
+
+  function TRPCProvider(
+    props: Readonly<{
+      children: React.ReactNode;
+      queryClient: QueryClient;
+      trpcClient: CreateTRPCClient<TRouter>;
+    }>,
+  ) {
+    const value = React.useMemo(
+      () =>
+        createTRPCOptionsProxy({
+          client: props.trpcClient,
+          queryClient: props.queryClient,
+        }),
+      [props.trpcClient, props.queryClient],
+    );
+    return (
+      <TRPCContext.Provider value={value}>
+        {props.children}
+      </TRPCContext.Provider>
+    );
+  }
+
+  function useTRPC() {
+    const utils = React.useContext(TRPCContext);
+    if (!utils) {
+      throw new Error('useTRPC() can only be used inside of a <TRPCProvider>');
+    }
+    return utils;
+  }
+
+  return { TRPCProvider, useTRPC };
+}