@trpc/react-query 10.0.0-proxy-beta.21

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) <year> <author>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+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.

package/README.md

@@ -0,0 +1,88 @@
+<p align="center">
+  <a href="https://trpc.io/"><img src="../../www/static/img/logo-text.svg" alt="tRPC" height="130"/></a>
+</p>
+
+<p align="center">
+  <strong>End-to-end typesafe APIs made easy</strong>
+</p>
+
+<p align="center">
+  <img src="https://assets.trpc.io/www/v10/preview-dark.gif" alt="Demo" />
+</p>
+
+# `@trpc/react`
+
+> Connect a tRPC server to React.
+
+## Documentation
+
+Full documentation for `@trpc/react-query` can be found [here](https://trpc.io/docs/react-queries)
+
+## Installation
+
+```bash
+# npm
+npm install @trpc/react-query@next @tanstack/react-query
+
+# Yarn
+yarn add @trpc/react-query@next @tanstack/react-query
+
+# pnpm
+pnpm add @trpc/react-query@next @tanstack/react-query
+```
+
+## Basic Example
+
+Create a utils file that exports tRPC hooks and providers.
+
+```ts
+import { createReactQueryHooks, createTRPCReact } from '@trpc/react-query';
+import type { AppRouter } from './server';
+
+export const trpc = createTRPCReact<AppRouter>();
+```
+
+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';
+
+export function App() {
+  const [queryClient] = useState(() => new QueryClient());
+  const [trpcClient] = useState(() =>
+    trpc.createClient({
+      url: 'http://localhost:5000/trpc',
+    }),
+  );
+  return (
+    <trpc.Provider client={trpcClient} queryClient={queryClient}>
+      <QueryClientProvider client={queryClient}>
+        {/* Your app here */}
+      </QueryClientProvider>
+    </trpc.Provider>
+  );
+}
+```
+
+Now in any component, you can query your API using the proxy exported from the utils file.
+
+```ts
+import { proxy } from '~/utils/trpc';
+
+export function Hello() {
+  const { data, error, status } = proxy.greeting.useQuery({ name: 'tRPC' });
+
+  if (error) {
+    return <p>{error.message}</p>;
+  }
+
+  if (status !== 'success') {
+    return <p>Loading...</p>;
+  }
+
+  return <div>{data && <p>{data.greeting}</p>}</div>;
+}
+```

package/dist/createHooksInternal-b47ee704.mjs

@@ -0,0 +1,392 @@
+import { createRecursiveProxy, createFlatProxy } from '@trpc/server/shared';
+import { useQuery, useQueryClient, useMutation, hashQueryKey, useInfiniteQuery } from '@tanstack/react-query';
+import { createTRPCClient } from '@trpc/client';
+import React, { createContext, useState, useEffect, useCallback, useMemo, useRef } from 'react';
+import { g as getArrayQueryKey } from './getArrayQueryKey-062214e0.mjs';
+
+/**
+ * We treat `undefined` as an input the same as omitting an `input`
+ * https://github.com/trpc/trpc/issues/2290
+ */ function getQueryKey(path, input) {
+    return input === undefined ? [
+        path
+    ] : [
+        path,
+        input
+    ];
+}
+
+/**
+ * Create proxy for decorating procedures
+ * @internal
+ */ function createReactProxyDecoration(name, hooks) {
+    return createRecursiveProxy((opts)=>{
+        const args = opts.args;
+        const pathCopy = [
+            name,
+            ...opts.path
+        ];
+        // The last arg is for instance `.useMutation` or `.useQuery()`
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const lastArg = pathCopy.pop();
+        // The `path` ends up being something like `post.byId`
+        const path = pathCopy.join('.');
+        if (lastArg === 'useMutation') {
+            return hooks[lastArg](path, ...args);
+        }
+        const [input, ...rest] = args;
+        const queryKey = getQueryKey(path, input);
+        return hooks[lastArg](queryKey, ...rest);
+    });
+}
+
+const contextProps = [
+    'client',
+    'ssrContext',
+    'ssrState',
+    'abortOnUnmount'
+];
+const TRPCContext = /*#__PURE__*/ createContext(null);
+
+/**
+ * @internal
+ */ function createReactQueryUtilsProxy(context) {
+    return createFlatProxy((key)=>{
+        const contextName = key;
+        if (contextProps.includes(contextName)) {
+            return context[contextName];
+        }
+        return createRecursiveProxy(({ path , args  })=>{
+            const pathCopy = [
+                key,
+                ...path
+            ];
+            const utilName = pathCopy.pop();
+            const fullPath = pathCopy.join('.');
+            const getOpts = (name)=>{
+                if ([
+                    'setData',
+                    'setInfiniteData'
+                ].includes(name)) {
+                    const [updater, input, ...rest] = args;
+                    const queryKey = getQueryKey(fullPath, input);
+                    return {
+                        queryKey,
+                        updater,
+                        rest
+                    };
+                }
+                const [input1, ...rest1] = args;
+                const queryKey1 = getQueryKey(fullPath, input1);
+                return {
+                    queryKey: queryKey1,
+                    rest: rest1
+                };
+            };
+            const { queryKey , rest , updater  } = getOpts(utilName);
+            const contextMap = {
+                fetch: ()=>context.fetchQuery(queryKey, ...rest),
+                fetchInfinite: ()=>context.fetchInfiniteQuery(queryKey, ...rest),
+                prefetch: ()=>context.prefetchQuery(queryKey, ...rest),
+                prefetchInfinite: ()=>context.prefetchInfiniteQuery(queryKey, ...rest),
+                invalidate: ()=>context.invalidateQueries(queryKey, ...rest),
+                refetch: ()=>context.refetchQueries(queryKey, ...rest),
+                cancel: ()=>context.cancelQuery(queryKey, ...rest),
+                setData: ()=>context.setQueryData(queryKey, updater, ...rest),
+                setInfiniteData: ()=>context.setInfiniteQueryData(queryKey, updater, ...rest),
+                getData: ()=>context.getQueryData(queryKey),
+                getInfiniteData: ()=>context.getInfiniteQueryData(queryKey)
+            };
+            return contextMap[utilName]();
+        });
+    });
+}
+
+function getClientArgs(pathAndInput, opts) {
+    const [path, input] = pathAndInput;
+    return [
+        path,
+        input,
+        opts?.trpc
+    ];
+}
+/**
+ * Makes a stable reference of the `trpc` prop
+ */ function useHookResult(value) {
+    const ref = useRef(value);
+    ref.current.path = value.path;
+    return ref.current;
+}
+/**
+ * Create strongly typed react hooks
+ * @internal
+ */ function createHooksInternal(config) {
+    const mutationSuccessOverride = config?.unstable_overrides?.useMutation?.onSuccess ?? ((options)=>options.originalFn());
+    const Context = TRPCContext;
+    const createClient = (opts)=>{
+        return createTRPCClient(opts);
+    };
+    const TRPCProvider = (props)=>{
+        const { abortOnUnmount =false , client , queryClient , ssrContext  } = props;
+        const [ssrState, setSSRState] = useState(props.ssrState ?? false);
+        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.createElement(Context.Provider, {
+            value: {
+                abortOnUnmount,
+                queryClient,
+                client,
+                ssrContext: ssrContext || null,
+                ssrState,
+                fetchQuery: useCallback((pathAndInput, opts)=>{
+                    return queryClient.fetchQuery(getArrayQueryKey(pathAndInput), ()=>client.query(...getClientArgs(pathAndInput, opts)), opts);
+                }, [
+                    client,
+                    queryClient
+                ]),
+                fetchInfiniteQuery: useCallback((pathAndInput, opts)=>{
+                    return queryClient.fetchInfiniteQuery(getArrayQueryKey(pathAndInput), ({ pageParam  })=>{
+                        const [path, input] = pathAndInput;
+                        const actualInput = {
+                            ...input,
+                            cursor: pageParam
+                        };
+                        return client.query(...getClientArgs([
+                            path,
+                            actualInput
+                        ], opts));
+                    }, opts);
+                }, [
+                    client,
+                    queryClient
+                ]),
+                prefetchQuery: useCallback((pathAndInput, opts)=>{
+                    return queryClient.prefetchQuery(getArrayQueryKey(pathAndInput), ()=>client.query(...getClientArgs(pathAndInput, opts)), opts);
+                }, [
+                    client,
+                    queryClient
+                ]),
+                prefetchInfiniteQuery: useCallback((pathAndInput, opts)=>{
+                    return queryClient.prefetchInfiniteQuery(getArrayQueryKey(pathAndInput), ({ pageParam  })=>{
+                        const [path, input] = pathAndInput;
+                        const actualInput = {
+                            ...input,
+                            cursor: pageParam
+                        };
+                        return client.query(...getClientArgs([
+                            path,
+                            actualInput
+                        ], opts));
+                    }, opts);
+                }, [
+                    client,
+                    queryClient
+                ]),
+                invalidateQueries: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.invalidateQueries(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ]),
+                refetchQueries: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.refetchQueries(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ]),
+                cancelQuery: useCallback((pathAndInput)=>{
+                    return queryClient.cancelQueries(getArrayQueryKey(pathAndInput));
+                }, [
+                    queryClient
+                ]),
+                setQueryData: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.setQueryData(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ]),
+                getQueryData: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.getQueryData(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ]),
+                setInfiniteQueryData: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.setQueryData(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ]),
+                getInfiniteQueryData: useCallback((...args)=>{
+                    const [queryKey, ...rest] = args;
+                    return queryClient.getQueryData(getArrayQueryKey(queryKey), ...rest);
+                }, [
+                    queryClient
+                ])
+            }
+        }, props.children);
+    };
+    function useContext() {
+        return React.useContext(Context);
+    }
+    /**
+   * Hack to make sure errors return `status`='error` when doing SSR
+   * @link https://github.com/trpc/trpc/pull/1645
+   */ function useSSRQueryOptionsIfNeeded(pathAndInput, opts) {
+        const { queryClient , ssrState  } = useContext();
+        return ssrState && ssrState !== 'mounted' && queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))?.state.status === 'error' ? {
+            retryOnMount: false,
+            ...opts
+        } : opts;
+    }
+    function useQuery$1(pathAndInput, opts) {
+        const { abortOnUnmount , client , ssrState , queryClient , prefetchQuery  } = useContext();
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && opts?.enabled !== false && !queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))) {
+            void prefetchQuery(pathAndInput, opts);
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
+        const hook = useQuery(getArrayQueryKey(pathAndInput), (queryFunctionContext)=>{
+            const actualOpts = {
+                ...ssrOpts,
+                trpc: {
+                    ...ssrOpts?.trpc,
+                    ...shouldAbortOnUnmount ? {
+                        signal: queryFunctionContext.signal
+                    } : {}
+                }
+            };
+            return client.query(...getClientArgs(pathAndInput, actualOpts));
+        }, ssrOpts);
+        hook.trpc = useHookResult({
+            path: pathAndInput[0]
+        });
+        return hook;
+    }
+    function useMutation$1(path, opts) {
+        const { client  } = useContext();
+        const queryClient = useQueryClient();
+        const hook = useMutation((input)=>{
+            const actualPath = Array.isArray(path) ? path[0] : path;
+            return client.mutation(...getClientArgs([
+                actualPath,
+                input
+            ], opts));
+        }, {
+            ...opts,
+            onSuccess (...args) {
+                const originalFn = ()=>opts?.onSuccess?.(...args);
+                return mutationSuccessOverride({
+                    originalFn,
+                    queryClient
+                });
+            }
+        });
+        hook.trpc = useHookResult({
+            path: Array.isArray(path) ? path[0] : path
+        });
+        return hook;
+    }
+    /* istanbul ignore next */ /**
+   * ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️
+   *  **Experimental.** API might change without major version bump
+   * ⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠️⚠
+   */ function useSubscription(pathAndInput, opts) {
+        const enabled = opts?.enabled ?? true;
+        const queryKey = hashQueryKey(pathAndInput);
+        const { client  } = useContext();
+        return useEffect(()=>{
+            if (!enabled) {
+                return;
+            }
+            const [path, input] = pathAndInput;
+            let isStopped = false;
+            const subscription = client.subscription(path, input ?? undefined, {
+                onStarted: ()=>{
+                    if (!isStopped) {
+                        opts.onStarted?.();
+                    }
+                },
+                onData: (data)=>{
+                    if (!isStopped) {
+                        opts.onData(data);
+                    }
+                },
+                onError: (err)=>{
+                    if (!isStopped) {
+                        opts.onError?.(err);
+                    }
+                }
+            });
+            return ()=>{
+                isStopped = true;
+                subscription.unsubscribe();
+            };
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+        }, [
+            queryKey,
+            enabled
+        ]);
+    }
+    function useInfiniteQuery$1(pathAndInput, opts) {
+        const [path, input] = pathAndInput;
+        const { client , ssrState , prefetchInfiniteQuery , queryClient , abortOnUnmount ,  } = useContext();
+        if (typeof window === 'undefined' && ssrState === 'prepass' && opts?.trpc?.ssr !== false && opts?.enabled !== false && !queryClient.getQueryCache().find(getArrayQueryKey(pathAndInput))) {
+            void prefetchInfiniteQuery(pathAndInput, opts);
+        }
+        const ssrOpts = useSSRQueryOptionsIfNeeded(pathAndInput, opts);
+        // request option should take priority over global
+        const shouldAbortOnUnmount = opts?.trpc?.abortOnUnmount ?? abortOnUnmount;
+        const hook = useInfiniteQuery(getArrayQueryKey(pathAndInput), (queryFunctionContext)=>{
+            const actualOpts = {
+                ...ssrOpts,
+                trpc: {
+                    ...ssrOpts?.trpc,
+                    ...shouldAbortOnUnmount ? {
+                        signal: queryFunctionContext.signal
+                    } : {}
+                }
+            };
+            const actualInput = {
+                ...input ?? {},
+                cursor: queryFunctionContext.pageParam
+            };
+            return client.query(...getClientArgs([
+                path,
+                actualInput
+            ], actualOpts));
+        }, ssrOpts);
+        hook.trpc = useHookResult({
+            path
+        });
+        return hook;
+    }
+    const useDehydratedState = (client, trpcState)=>{
+        const transformed = useMemo(()=>{
+            if (!trpcState) {
+                return trpcState;
+            }
+            return client.runtime.transformer.deserialize(trpcState);
+        }, [
+            trpcState,
+            client
+        ]);
+        return transformed;
+    };
+    return {
+        Provider: TRPCProvider,
+        createClient,
+        useContext,
+        useQuery: useQuery$1,
+        useMutation: useMutation$1,
+        useSubscription,
+        useDehydratedState,
+        useInfiniteQuery: useInfiniteQuery$1
+    };
+}
+
+export { createReactQueryUtilsProxy as a, createReactProxyDecoration as b, createHooksInternal as c };