@trpc/react-query 10.7.0 → 10.7.1-alpha-next-2023-09-27-02-47-10.74

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) <year> <author>
+Copyright (c) 2023 Alex Johansson
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal
@@ -18,4 +18,4 @@ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
-SOFTWARE.
+SOFTWARE.

package/README.md

@@ -31,6 +31,9 @@ yarn add @trpc/react-query @tanstack/react-query
 
 # pnpm
 pnpm add @trpc/react-query @tanstack/react-query
+
+# Bun
+bun add @trpc/react-query @tanstack/react-query
 ```
 
 ## Basic Example
@@ -38,7 +41,7 @@ pnpm add @trpc/react-query @tanstack/react-query
 Create a utils file that exports tRPC hooks and providers.
 
 ```ts
-import { createReactQueryHooks, createTRPCReact } from '@trpc/react-query';
+import { createTRPCReact } from '@trpc/react-query';
 import type { AppRouter } from './server';
 
 export const trpc = createTRPCReact<AppRouter>();
@@ -48,9 +51,8 @@ Use the provider to connect to your API.
 
 ```ts
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
-import React from 'react';
-import { useState } from 'react';
 import { trpc } from '~/utils/trpc';
+import React, { useState } from 'react';
 
 export function App() {
   const [queryClient] = useState(() => new QueryClient());
@@ -72,10 +74,10 @@ export function App() {
 Now in any component, you can query your API using the proxy exported from the utils file.
 
 ```ts
-import { proxy } from '~/utils/trpc';
+import { trpc } from '~/utils/trpc';
 
 export function Hello() {
-  const { data, error, status } = proxy.greeting.useQuery({ name: 'tRPC' });
+  const { data, error, status } = trpc.greeting.useQuery({ name: 'tRPC' });
 
   if (error) {
     return <p>{error.message}</p>;

package/dist/createHooksInternal-3565a89f.js

@@ -0,0 +1,452 @@
+'use strict';
+
+var shared = require('@trpc/server/shared');
+var reactQuery = require('@tanstack/react-query');
+var client = require('@trpc/client');
+var React = require('react');
+var utilsProxy = require('./utilsProxy-981e4875.js');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
+
+/**
+ * Create proxy for decorating procedures
+ * @internal
+ */ function createReactProxyDecoration(name, hooks) {
+    return shared.createRecursiveProxy(({ path , args  })=>{
+        const pathCopy = [
+            name,
+            ...path
+        ];
+        // The last arg is for instance `.useMutation` or `.useQuery()`
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const lastArg = pathCopy.pop();
+        if (lastArg === 'useMutation') {
+            return hooks[lastArg](pathCopy, ...args);
+        }
+        if (lastArg === '_def') {
+            return {
+                path: pathCopy
+            };
+        }
+        const [input, ...rest] = args;
+        const opts = rest[0] || {};
+        return hooks[lastArg](pathCopy, input, opts);
+    });
+}
+
+/**
+ * Create proxy for `useQueries` options
+ * @internal
+ */ function createUseQueriesProxy(client) {
+    return shared.createRecursiveProxy((opts)=>{
+        const arrayPath = opts.path;
+        const dotPath = arrayPath.join('.');
+        const [input, _opts] = opts.args;
+        const options = {
+            queryKey: utilsProxy.getQueryKeyInternal(arrayPath, input, 'query'),
+            queryFn: ()=>{
+                return client.query(dotPath, input, _opts?.trpc);
+            },
+            ..._opts
+        };
+        return options;
+    });
+}
+
+function getClientArgs(queryKey, opts, pageParam) {
+    const path = queryKey[0];
+    const input = queryKey[1]?.input;
+    if (pageParam) input.cursor = pageParam;
+    return [
+        path.join('.'),
+        input,
+        opts?.trpc
+    ];
+}
+
+/**
+ * Makes a stable reference of the `trpc` prop
+ */ function useHookResult(value) {
+    const ref = React.useRef(value);
+    ref.current.path = value.path;
+    return ref.current;
+}
+
+/**
+ * @internal
+ */ function createRootHooks(config) {
+    const mutationSuccessOverride = config?.overrides?.useMutation?.onSuccess ?? ((options)=>options.originalFn());
+    const Context = config?.context ?? utilsProxy.TRPCContext;
+    const createClient = (opts)=>{
+        return client.createTRPCUntypedClient(opts);
+    };
+    const TRPCProvider = (props)=>{
+        const { abortOnUnmount =false , client , queryClient , ssrContext  } = props;
+        const [ssrState, setSSRState] = React.useState(props.ssrState ?? false);
+        React.useEffect(()=>{
+            // Only updating state to `mounted` if we are using SSR.
+            // This makes it so we don't have an unnecessary re-render when opting out of SSR.
+            setSSRState((state)=>state ? 'mounted' : false);
+        }, []);
+        return /*#__PURE__*/ React__default["default"].createElement(Context.Provider, {
+            value: {
+                abortOnUnmount,
+                queryClient,
+                client,
+                ssrContext: ssrContext ?? null,
+                ssrState,
+                fetchQuery: React.useCallback((queryKey, opts)=>{
+                    return queryClient.fetchQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
+                    });
+                }, [
+                    client,
+                    queryClient
+                ]),
+                fetchInfiniteQuery: React.useCallback((queryKey, opts)=>{
+                    return queryClient.fetchInfiniteQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ({ pageParam  })=>{
+                            return client.query(...getClientArgs(queryKey, opts, pageParam));
+                        },
+                        defaultPageParam: opts?.initialCursor ?? null
+                    });
+                }, [
+                    client,
+                    queryClient
+                ]),
+                prefetchQuery: React.useCallback((queryKey, opts)=>{
+                    return queryClient.prefetchQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
+                    });
+                }, [
+                    client,
+                    queryClient
+                ]),
+                prefetchInfiniteQuery: React.useCallback((queryKey, opts)=>{
+                    return queryClient.prefetchInfiniteQuery({
+                        ...opts,
+                        queryKey,
+                        queryFn: ({ pageParam  })=>{
+                            return client.query(...getClientArgs(queryKey, opts, pageParam));
+                        },
+                        defaultPageParam: opts?.initialCursor ?? null
+                    });
+                }, [
+                    client,
+                    queryClient
+                ]),
+                ensureQueryData: React.useCallback((queryKey, opts)=>{
+                    return queryClient.ensureQueryData({
+                        ...opts,
+                        queryKey,
+                        queryFn: ()=>client.query(...getClientArgs(queryKey, opts))
+                    });
+                }, [
+                    client,
+                    queryClient
+                ]),
+                invalidateQueries: React.useCallback((queryKey, filters, options)=>{
+                    return queryClient.invalidateQueries({
+                        ...filters,
+                        queryKey
+                    }, options);
+                }, [
+                    queryClient
+                ]),
+                resetQueries: React.useCallback((queryKey, filters, options)=>{
+                    return queryClient.resetQueries({
+                        ...filters,
+                        queryKey
+                    }, options);
+                }, [
+                    queryClient
+                ]),
+                refetchQueries: React.useCallback((queryKey, filters, options)=>{
+                    return queryClient.refetchQueries({
+                        ...filters,
+                        queryKey
+                    }, options);
+                }, [
+                    queryClient
+                ]),
+                cancelQuery: React.useCallback((queryKey, options)=>{
+                    return queryClient.cancelQueries({
+                        queryKey
+                    }, options);
+                }, [
+                    queryClient
+                ]),
+                setQueryData: React.useCallback((queryKey, updater, options)=>{
+                    return queryClient.setQueryData(queryKey, updater, options);
+                }, [
+                    queryClient
+                ]),
+                getQueryData: React.useCallback(// REVIEW: Should this take opts?? The types doesn't have it
+                (queryKey)=>{
+                    return queryClient.getQueryData(queryKey);
+                }, [
+                    queryClient
+                ]),
+                setInfiniteQueryData: React.useCallback((queryKey, updater, options)=>{
+                    return queryClient.setQueryData(queryKey, updater, options);
+                }, [
+                    queryClient
+                ]),
+                getInfiniteQueryData: React.useCallback((queryKey)=>{
+                    return queryClient.getQueryData(queryKey);
+                }, [
+                    queryClient
+                ])
+            }
+        }, props.children);
+    };
+    function useContext() {
+        return React__default["default"].useContext(Context);
+    }
+    /**
+   * Hack to make sure errors return `status`='error` when doing SSR
+   * @link https://github.com/trpc/trpc/pull/1645
+   */ function useSSRQueryOptionsIfNeeded(queryKey, opts) {
+        const { queryClient , ssrState  } = useContext();
+        return ssrState && ssrState !== 'mounted' && queryClient.getQueryCache().find({
+            queryKey
+        })?.state.status === 'error' ? {
+            retryOnMount: false,
+            ...opts
+        } : opts;
+    }
+    function useQuery(path, input, opts) {
+        const context = useContext();
+        if (!context) {
+            throw new Error('Unable to retrieve application context. Did you forget to wrap your App inside `withTRPC` HoC?');
+        }
+        const { abortOnUnmount , client , ssrState , queryClient , prefetchQuery  } = context;
+        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'query');
+        const defaultOpts = queryClient.getQueryDefaults(queryKey);
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && (opts?.enabled ?? defaultOpts?.enabled) !== false && !queryClient.getQueryCache().find({
+            queryKey
+        })) {
+            void prefetchQuery(queryKey, opts);
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts
+        });
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? config?.abortOnUnmount ?? abortOnUnmount;
+        const hook = reactQuery.useQuery({
+            ...ssrOpts,
+            queryKey: queryKey,
+            queryFn: (queryFunctionContext)=>{
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...shouldAbortOnUnmount ? {
+                            signal: queryFunctionContext.signal
+                        } : {}
+                    }
+                };
+                return client.query(...getClientArgs(queryKey, actualOpts));
+            }
+        }, queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.')
+        });
+        return hook;
+    }
+    function useSuspenseQuery(path, input, opts) {
+        const hookResult = useQuery(path, input, {
+            ...opts,
+            suspense: true,
+            enabled: true,
+            throwOnError: true
+        });
+        return [
+            hookResult.data,
+            hookResult
+        ];
+    }
+    function useMutation(path, opts) {
+        const { client  } = useContext();
+        const queryClient = reactQuery.useQueryClient();
+        const mutationKey = [
+            path
+        ];
+        const defaultOpts = queryClient.getMutationDefaults(mutationKey);
+        const hook = reactQuery.useMutation({
+            ...opts,
+            mutationKey: mutationKey,
+            mutationFn: (input)=>{
+                return client.mutation(...getClientArgs([
+                    path,
+                    {
+                        input
+                    }
+                ], opts));
+            },
+            onSuccess (...args) {
+                const originalFn = ()=>opts?.onSuccess?.(...args) ?? defaultOpts?.onSuccess?.(...args);
+                return mutationSuccessOverride({
+                    originalFn,
+                    queryClient,
+                    meta: opts?.meta ?? defaultOpts?.meta ?? {}
+                });
+            }
+        }, queryClient);
+        hook.trpc = useHookResult({
+            path: path.join('.')
+        });
+        return hook;
+    }
+    /* istanbul ignore next -- @preserve */ function useSubscription(path, input, opts) {
+        const enabled = opts?.enabled ?? true;
+        const queryKey = reactQuery.hashKey(utilsProxy.getQueryKeyInternal(path, input, 'any'));
+        const { client  } = useContext();
+        const optsRef = React.useRef(opts);
+        optsRef.current = opts;
+        React.useEffect(()=>{
+            if (!enabled) {
+                return;
+            }
+            let isStopped = false;
+            const subscription = client.subscription(path.join('.'), input ?? undefined, {
+                onStarted: ()=>{
+                    if (!isStopped) {
+                        optsRef.current.onStarted?.();
+                    }
+                },
+                onData: (data)=>{
+                    if (!isStopped) {
+                        opts.onData(data);
+                    }
+                },
+                onError: (err)=>{
+                    if (!isStopped) {
+                        optsRef.current.onError?.(err);
+                    }
+                }
+            });
+            return ()=>{
+                isStopped = true;
+                subscription.unsubscribe();
+            };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            queryKey,
+            enabled
+        ]);
+    }
+    function useInfiniteQuery(path, input, opts) {
+        const { client , ssrState , prefetchInfiniteQuery , queryClient , abortOnUnmount ,  } = useContext();
+        const queryKey = utilsProxy.getQueryKeyInternal(path, input, 'infinite');
+        const defaultOpts = queryClient.getQueryDefaults(queryKey);
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && (opts?.enabled ?? defaultOpts?.enabled) !== false && !queryClient.getQueryCache().find({
+            queryKey
+        })) {
+            void prefetchInfiniteQuery(queryKey, {
+                ...defaultOpts,
+                ...opts
+            });
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(queryKey, {
+            ...defaultOpts,
+            ...opts
+        });
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
+        const hook = reactQuery.useInfiniteQuery({
+            ...ssrOpts,
+            defaultPageParam: opts.initialCursor ?? null,
+            queryKey: queryKey,
+            queryFn: (queryFunctionContext)=>{
+                const actualOpts = {
+                    ...ssrOpts,
+                    trpc: {
+                        ...ssrOpts?.trpc,
+                        ...shouldAbortOnUnmount ? {
+                            signal: queryFunctionContext.signal
+                        } : {}
+                    }
+                };
+                return client.query(...getClientArgs(queryKey, actualOpts, queryFunctionContext.pageParam ?? opts.initialCursor));
+            }
+        }, queryClient);
+        hook.trpc = useHookResult({
+            // REVIEW: What do we want to return here?
+            path: path.join('.')
+        });
+        return hook;
+    }
+    function useSuspenseInfiniteQuery(path, input, opts) {
+        const hookResult = useInfiniteQuery(path, input, {
+            ...opts,
+            suspense: true,
+            enabled: true,
+            throwOnError: true
+        });
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        return [
+            hookResult.data,
+            hookResult
+        ];
+    }
+    const useQueries = (queriesCallback)=>{
+        const { ssrState , queryClient , prefetchQuery , client  } = useContext();
+        const proxy = createUseQueriesProxy(client);
+        const queries = queriesCallback(proxy);
+        if (typeof window === 'undefined' && ssrState === 'prepass') {
+            for (const query of queries){
+                const queryOption = query;
+                if (queryOption.trpc?.ssr !== false && !queryClient.getQueryCache().find({
+                    queryKey: queryOption.queryKey
+                })) {
+                    void prefetchQuery(queryOption.queryKey, queryOption);
+                }
+            }
+        }
+        return reactQuery.useQueries({
+            queries: queries.map((query)=>({
+                    ...query,
+                    queryKey: query.queryKey
+                }))
+        }, queryClient);
+    };
+    const useDehydratedState = (client, trpcState)=>{
+        const transformed = React.useMemo(()=>{
+            if (!trpcState) {
+                return trpcState;
+            }
+            return client.runtime.transformer.deserialize(trpcState);
+        }, [
+            trpcState,
+            client
+        ]);
+        return transformed;
+    };
+    return {
+        Provider: TRPCProvider,
+        createClient,
+        useContext,
+        useQuery,
+        useSuspenseQuery,
+        useQueries,
+        useMutation,
+        useSubscription,
+        useDehydratedState,
+        useInfiniteQuery,
+        useSuspenseInfiniteQuery
+    };
+}
+
+exports.createReactProxyDecoration = createReactProxyDecoration;
+exports.createRootHooks = createRootHooks;
+exports.createUseQueriesProxy = createUseQueriesProxy;
+exports.getClientArgs = getClientArgs;