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

package/src/shared/proxy/utilsProxy.ts

@@ -0,0 +1,266 @@
+import {
+  CancelOptions,
+  InfiniteData,
+  InvalidateOptions,
+  InvalidateQueryFilters,
+  RefetchOptions,
+  RefetchQueryFilters,
+  SetDataOptions,
+  Updater,
+} from '@tanstack/react-query';
+import { TRPCClientError } from '@trpc/client';
+import {
+  AnyQueryProcedure,
+  AnyRouter,
+  Filter,
+  ProcedureOptions,
+  inferProcedureInput,
+  inferProcedureOutput,
+} from '@trpc/server';
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
+import {
+  ProxyTRPCContextProps,
+  TRPCContextState,
+  TRPCFetchInfiniteQueryOptions,
+  TRPCFetchQueryOptions,
+  contextProps,
+} from '../../internals/context';
+import { getQueryKey } from '../../internals/getQueryKey';
+
+type DecorateProcedure<
+  TRouter extends AnyRouter,
+  TProcedure extends AnyQueryProcedure,
+> = {
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetch(
+    input: inferProcedureInput<TProcedure>,
+    opts?: TRPCFetchQueryOptions<
+      inferProcedureInput<TProcedure>,
+      TRPCClientError<TRouter>,
+      inferProcedureOutput<TProcedure>
+    >,
+  ): Promise<inferProcedureOutput<TProcedure>>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetchInfinite(
+    input: inferProcedureInput<TProcedure>,
+    opts?: TRPCFetchInfiniteQueryOptions<
+      inferProcedureInput<TProcedure>,
+      TRPCClientError<TRouter>,
+      inferProcedureOutput<TProcedure>
+    >,
+  ): Promise<InfiniteData<inferProcedureOutput<TProcedure>>>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetch(
+    input: inferProcedureInput<TProcedure>,
+    opts?: TRPCFetchQueryOptions<
+      inferProcedureInput<TProcedure>,
+      TRPCClientError<TRouter>,
+      inferProcedureOutput<TProcedure>
+    >,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetchInfinite(
+    input: inferProcedureInput<TProcedure>,
+    procedureOpts?: ProcedureOptions,
+    opts?: TRPCFetchInfiniteQueryOptions<
+      inferProcedureInput<TProcedure>,
+      TRPCClientError<TRouter>,
+      inferProcedureOutput<TProcedure>
+    >,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/query-invalidation
+   */
+  invalidate(
+    input?: inferProcedureInput<TProcedure>,
+    filters?: InvalidateQueryFilters,
+    options?: InvalidateOptions,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientrefetchqueries
+   */
+  refetch(
+    input?: inferProcedureInput<TProcedure>,
+    filters?: RefetchQueryFilters,
+    options?: RefetchOptions,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/query-cancellation
+   */
+  cancel(
+    input?: inferProcedureInput<TProcedure>,
+    options?: CancelOptions,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata
+   */
+  setData(
+    updater: Updater<
+      inferProcedureOutput<TProcedure> | undefined,
+      inferProcedureOutput<TProcedure> | undefined
+    >,
+    input?: inferProcedureInput<TProcedure>,
+    options?: SetDataOptions,
+  ): void;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  setInfiniteData(
+    updater: Updater<
+      InfiniteData<inferProcedureOutput<TProcedure>> | undefined,
+      InfiniteData<inferProcedureOutput<TProcedure>> | undefined
+    >,
+    input?: inferProcedureInput<TProcedure>,
+    options?: SetDataOptions,
+  ): void;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  getData(
+    input?: inferProcedureInput<TProcedure>,
+  ): inferProcedureOutput<TProcedure> | undefined;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  getInfiniteData(
+    input?: inferProcedureInput<TProcedure>,
+  ): InfiniteData<inferProcedureOutput<TProcedure>> | undefined;
+};
+
+/**
+ * A type that will traverse all procedures and sub routers of a given router to create a union of
+ * their possible input types
+ */
+type InferAllRouterQueryInputTypes<TRouter extends AnyRouter> = {
+  [TKey in keyof Filter<
+    TRouter['_def']['record'],
+    AnyRouter | AnyQueryProcedure
+  >]: TRouter['_def']['record'][TKey] extends AnyQueryProcedure
+    ? inferProcedureInput<TRouter['_def']['record'][TKey]>
+    : InferAllRouterQueryInputTypes<TRouter['_def']['record'][TKey]>; // Recurse as we have a sub router!
+}[keyof Filter<TRouter['_def']['record'], AnyRouter | AnyQueryProcedure>]; // This flattens results into a big union
+
+/**
+ * this is the type that is used to add in procedures that can be used on
+ * an entire router
+ */
+type DecorateRouterProcedure<TRouter extends AnyRouter> = {
+  /**
+   * @link https://react-query.tanstack.com/guides/query-invalidation
+   */
+  invalidate(
+    input?: Partial<InferAllRouterQueryInputTypes<TRouter>>,
+    filters?: InvalidateQueryFilters,
+    options?: InvalidateOptions,
+  ): Promise<void>;
+};
+
+/**
+ * @internal
+ */
+export type DecoratedProcedureUtilsRecord<TRouter extends AnyRouter> = {
+  [TKey in keyof Filter<
+    TRouter['_def']['record'],
+    AnyRouter | AnyQueryProcedure
+  >]: TRouter['_def']['record'][TKey] extends AnyRouter
+    ? DecoratedProcedureUtilsRecord<TRouter['_def']['record'][TKey]> &
+        DecorateRouterProcedure<TRouter['_def']['record'][TKey]>
+    : // utils only apply to queries
+      DecorateProcedure<TRouter, TRouter['_def']['record'][TKey]>;
+} & DecorateRouterProcedure<TRouter>; // Add functions that should be available at utils root
+
+type AnyDecoratedProcedure = DecorateProcedure<any, any>;
+
+export type CreateReactUtilsProxy<
+  TRouter extends AnyRouter,
+  TSSRContext,
+> = DecoratedProcedureUtilsRecord<TRouter> &
+  ProxyTRPCContextProps<TRouter, TSSRContext>;
+
+/**
+ * @internal
+ */
+export function createReactQueryUtilsProxy<
+  TRouter extends AnyRouter,
+  TSSRContext,
+>(context: TRPCContextState<AnyRouter, unknown>) {
+  type CreateReactUtilsProxyReturnType = CreateReactUtilsProxy<
+    TRouter,
+    TSSRContext
+  >;
+
+  return createFlatProxy<CreateReactUtilsProxyReturnType>((key) => {
+    const contextName = key as typeof contextProps[number];
+    if (contextProps.includes(contextName)) {
+      return context[contextName];
+    }
+
+    return createRecursiveProxy(({ path, args }) => {
+      const pathCopy = [key, ...path];
+      const utilName = pathCopy.pop() as keyof AnyDecoratedProcedure;
+
+      const fullPath = pathCopy.join('.');
+
+      const getOpts = (name: typeof utilName) => {
+        if (['setData', 'setInfiniteData'].includes(name)) {
+          const [updater, input, ...rest] = args as Parameters<
+            AnyDecoratedProcedure[typeof utilName]
+          >;
+          const queryKey = getQueryKey(fullPath, input);
+          return {
+            queryKey,
+            updater,
+            rest,
+          };
+        }
+
+        const [input, ...rest] = args as Parameters<
+          AnyDecoratedProcedure[typeof utilName]
+        >;
+        const queryKey = getQueryKey(fullPath, input);
+        return {
+          queryKey,
+          rest,
+        };
+      };
+
+      const { queryKey, rest, updater } = getOpts(utilName);
+
+      const contextMap: Record<keyof AnyDecoratedProcedure, () => unknown> = {
+        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]();
+    });
+  });
+}

package/src/shared/queryClient.ts

@@ -0,0 +1,20 @@
+import { QueryClient, QueryClientConfig } from '@tanstack/react-query';
+
+/**
+ * @internal
+ */
+export type CreateTRPCReactQueryClientConfig =
+  | {
+      queryClient?: QueryClient;
+      queryClientConfig?: never;
+    }
+  | {
+      queryClientConfig?: QueryClientConfig;
+      queryClient?: never;
+    };
+
+/**
+ * @internal
+ */
+export const getQueryClient = (config: CreateTRPCReactQueryClientConfig) =>
+  config.queryClient ?? new QueryClient(config.queryClientConfig);

package/src/shared/types.ts

@@ -0,0 +1,27 @@
+import { QueryClient } from '@tanstack/react-query';
+import { AnyRouter, MaybePromise } from '@trpc/server';
+
+/**
+ * @internal
+ */
+export interface UseMutationOverride {
+  onSuccess: (opts: {
+    /**
+     * Calls the original function that was defined in the query's `onSuccess` option
+     */
+    originalFn: () => MaybePromise<unknown>;
+    queryClient: QueryClient;
+  }) => MaybePromise<unknown>;
+}
+
+/**
+ * @internal
+ */
+export interface CreateTRPCReactOptions<_TRouter extends AnyRouter> {
+  /**
+   * Override behaviors of the built-in hooks
+   */
+  unstable_overrides?: {
+    useMutation?: Partial<UseMutationOverride>;
+  };
+}

package/src/ssg/index.ts

@@ -0,0 +1,4 @@
+export { createSSGHelpers } from './ssg';
+export type { CreateSSGHelpersOptions } from './ssg';
+export { createProxySSGHelpers } from './ssgProxy';
+export type { DecoratedProcedureSSGRecord } from './ssgProxy';

package/src/ssg/ssg.ts

@@ -0,0 +1,138 @@
+import {
+  DehydrateOptions,
+  DehydratedState,
+  InfiniteData,
+  dehydrate,
+} from '@tanstack/react-query';
+import {
+  AnyRouter,
+  ClientDataTransformerOptions,
+  callProcedure,
+  inferHandlerInput,
+  inferProcedureOutput,
+  inferRouterContext,
+} from '@trpc/server';
+import { getArrayQueryKey } from '../internals/getArrayQueryKey';
+import { CreateTRPCReactQueryClientConfig, getQueryClient } from '../shared';
+
+interface CreateSSGHelpersOptionsBase<TRouter extends AnyRouter> {
+  router: TRouter;
+  ctx: inferRouterContext<TRouter>;
+  transformer?: ClientDataTransformerOptions;
+}
+export type CreateSSGHelpersOptions<TRouter extends AnyRouter> =
+  CreateSSGHelpersOptionsBase<TRouter> & CreateTRPCReactQueryClientConfig;
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ * @deprecated use `createProxySSGHelpers` instead
+ */
+export function createSSGHelpers<TRouter extends AnyRouter>(
+  opts: CreateSSGHelpersOptions<TRouter>,
+) {
+  const { router, transformer, ctx } = opts;
+  type TQueries = TRouter['_def']['queries'];
+  const queryClient = getQueryClient(opts);
+
+  const serialize = transformer
+    ? ('input' in transformer ? transformer.input : transformer).serialize
+    : (obj: unknown) => obj;
+
+  const prefetchQuery = async <
+    TPath extends keyof TQueries & string,
+    TProcedure extends TQueries[TPath],
+  >(
+    ...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
+  ) => {
+    return queryClient.prefetchQuery(getArrayQueryKey(pathAndInput), () => {
+      return callProcedure({
+        procedures: router._def.procedures,
+        path: pathAndInput[0],
+        rawInput: pathAndInput[1],
+        ctx,
+        type: 'query',
+      });
+    });
+  };
+
+  const prefetchInfiniteQuery = async <
+    TPath extends keyof TQueries & string,
+    TProcedure extends TQueries[TPath],
+  >(
+    ...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
+  ) => {
+    return queryClient.prefetchInfiniteQuery(
+      getArrayQueryKey(pathAndInput),
+      () => {
+        return callProcedure({
+          procedures: router._def.procedures,
+          path: pathAndInput[0],
+          rawInput: pathAndInput[1],
+          ctx,
+          type: 'query',
+        });
+      },
+    );
+  };
+
+  const fetchQuery = async <
+    TPath extends keyof TQueries & string,
+    TProcedure extends TQueries[TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+  >(
+    ...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
+  ): Promise<TOutput> => {
+    return queryClient.fetchQuery(getArrayQueryKey(pathAndInput), () => {
+      return callProcedure({
+        procedures: router._def.procedures,
+        path: pathAndInput[0],
+        rawInput: pathAndInput[1],
+        ctx,
+        type: 'query',
+      });
+    });
+  };
+
+  const fetchInfiniteQuery = async <
+    TPath extends keyof TQueries & string,
+    TProcedure extends TQueries[TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+  >(
+    ...pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>]
+  ): Promise<InfiniteData<TOutput>> => {
+    return queryClient.fetchInfiniteQuery(
+      getArrayQueryKey(pathAndInput),
+      () => {
+        return callProcedure({
+          procedures: router._def.procedures,
+          path: pathAndInput[0],
+          rawInput: pathAndInput[1],
+          ctx,
+          type: 'query',
+        });
+      },
+    );
+  };
+
+  function _dehydrate(
+    opts: DehydrateOptions = {
+      shouldDehydrateQuery() {
+        // makes sure to serialize errors
+        return true;
+      },
+    },
+  ): DehydratedState {
+    const before = dehydrate(queryClient, opts);
+    const after = serialize(before);
+    return after;
+  }
+
+  return {
+    prefetchQuery,
+    prefetchInfiniteQuery,
+    fetchQuery,
+    fetchInfiniteQuery,
+    dehydrate: _dehydrate,
+    queryClient,
+  };
+}

package/src/ssg/ssgProxy.ts

@@ -0,0 +1,105 @@
+import {
+  DehydrateOptions,
+  DehydratedState,
+  InfiniteData,
+  QueryClient,
+} from '@tanstack/react-query';
+import {
+  AnyProcedure,
+  AnyQueryProcedure,
+  AnyRouter,
+  Filter,
+  inferHandlerInput,
+  inferProcedureOutput,
+} from '@trpc/server';
+import { createFlatProxy, createRecursiveProxy } from '@trpc/server/shared';
+import { CreateSSGHelpersOptions, createSSGHelpers } from './ssg';
+
+type DecorateProcedure<TProcedure extends AnyProcedure> = {
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetch(
+    ...args: inferHandlerInput<TProcedure>
+  ): Promise<inferProcedureOutput<TProcedure>>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetchInfinite(
+    ...args: inferHandlerInput<TProcedure>
+  ): Promise<InfiniteData<inferProcedureOutput<TProcedure>>>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetch(...args: inferHandlerInput<TProcedure>): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetchInfinite(...args: inferHandlerInput<TProcedure>): Promise<void>;
+};
+
+/**
+ * @internal
+ */
+export type DecoratedProcedureSSGRecord<TRouter extends AnyRouter> = {
+  [TKey in keyof Filter<
+    TRouter['_def']['record'],
+    AnyRouter | AnyQueryProcedure
+  >]: TRouter['_def']['record'][TKey] extends AnyRouter
+    ? DecoratedProcedureSSGRecord<TRouter['_def']['record'][TKey]>
+    : // utils only apply to queries
+      DecorateProcedure<TRouter['_def']['record'][TKey]>;
+};
+
+type AnyDecoratedProcedure = DecorateProcedure<any>;
+
+/**
+ * Create functions you can use for server-side rendering / static generation
+ */
+export function createProxySSGHelpers<TRouter extends AnyRouter>(
+  opts: CreateSSGHelpersOptions<TRouter>,
+) {
+  const helpers = createSSGHelpers(opts);
+
+  type CreateProxySSGHelpers = {
+    queryClient: QueryClient;
+    dehydrate: (opts?: DehydrateOptions) => DehydratedState;
+  } & DecoratedProcedureSSGRecord<TRouter>;
+
+  return createFlatProxy<CreateProxySSGHelpers>((key) => {
+    if (key === 'queryClient') {
+      return helpers.queryClient;
+    }
+
+    if (key === 'dehydrate') {
+      return helpers.dehydrate;
+    }
+    return createRecursiveProxy((opts) => {
+      const args = opts.args;
+
+      const pathCopy = [key, ...opts.path];
+
+      const utilName = pathCopy.pop() as keyof AnyDecoratedProcedure;
+
+      const fullPath = pathCopy.join('.');
+
+      switch (utilName) {
+        case 'fetch': {
+          return helpers.fetchQuery(fullPath, ...(args as any));
+        }
+        case 'fetchInfinite': {
+          return helpers.fetchInfiniteQuery(fullPath, ...(args as any));
+        }
+        case 'prefetch': {
+          return helpers.prefetchQuery(fullPath, ...(args as any));
+        }
+        case 'prefetchInfinite': {
+          return helpers.prefetchInfiniteQuery(fullPath, ...(args as any));
+        }
+      }
+    });
+  });
+}

package/ssg/index.d.ts

@@ -0,0 +1 @@
+export * from '../dist/ssg';

package/ssg/index.js

@@ -0,0 +1 @@
+module.exports = require('../dist/ssg');