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

package/src/internals/context.tsx

@@ -0,0 +1,235 @@
+import {
+  CancelOptions,
+  FetchInfiniteQueryOptions,
+  FetchQueryOptions,
+  InfiniteData,
+  InvalidateOptions,
+  InvalidateQueryFilters,
+  QueryClient,
+  RefetchOptions,
+  RefetchQueryFilters,
+  SetDataOptions,
+  Updater,
+} from '@tanstack/react-query';
+import { TRPCClient, TRPCClientError, TRPCRequestOptions } from '@trpc/client';
+import type {
+  AnyRouter,
+  inferHandlerInput,
+  inferProcedureInput,
+  inferProcedureOutput,
+} from '@trpc/server';
+import { createContext } from 'react';
+
+export interface TRPCFetchQueryOptions<TInput, TError, TOutput>
+  extends FetchQueryOptions<TInput, TError, TOutput>,
+    TRPCRequestOptions {}
+
+export interface TRPCFetchInfiniteQueryOptions<TInput, TError, TOutput>
+  extends FetchInfiniteQueryOptions<TInput, TError, TOutput>,
+    TRPCRequestOptions {}
+
+/** @internal */
+export type SSRState = false | 'prepass' | 'mounting' | 'mounted';
+
+export interface ProxyTRPCContextProps<TRouter extends AnyRouter, TSSRContext> {
+  /**
+   * The `TRPCClient`
+   */
+  client: TRPCClient<TRouter>;
+  /**
+   * The SSR context when server-side rendering
+   * @default null
+   */
+  ssrContext?: TSSRContext | null;
+  /**
+   * State of SSR hydration.
+   * - `false` if not using SSR.
+   * - `prepass` when doing a prepass to fetch queries' data
+   * - `mounting` before TRPCProvider has been rendered on the client
+   * - `mounted` when the TRPCProvider has been rendered on the client
+   * @default false
+   */
+  ssrState?: SSRState;
+  /**
+   * Abort loading query calls when unmounting a component - usually when navigating to a new page
+   * @default false
+   */
+  abortOnUnmount?: boolean;
+}
+
+export interface TRPCContextProps<TRouter extends AnyRouter, TSSRContext>
+  extends ProxyTRPCContextProps<TRouter, TSSRContext> {
+  /**
+   * The react-query `QueryClient`
+   */
+  queryClient: QueryClient;
+}
+
+export const contextProps: (keyof ProxyTRPCContextProps<any, any>)[] = [
+  'client',
+  'ssrContext',
+  'ssrState',
+  'abortOnUnmount',
+];
+
+/** @internal */
+export interface TRPCContextState<
+  TRouter extends AnyRouter,
+  TSSRContext = undefined,
+> extends Required<TRPCContextProps<TRouter, TSSRContext>> {
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetchQuery<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TProcedure extends TRouter['_def']['queries'][TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+    TInput extends inferProcedureInput<TProcedure>,
+  >(
+    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+    opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TRouter>, TOutput>,
+  ): Promise<TOutput>;
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  fetchInfiniteQuery<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TProcedure extends TRouter['_def']['queries'][TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+    TInput extends inferProcedureInput<TProcedure>,
+  >(
+    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+    opts?: TRPCFetchInfiniteQueryOptions<
+      TInput,
+      TRPCClientError<TRouter>,
+      TOutput
+    >,
+  ): Promise<InfiniteData<TOutput>>;
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetchQuery<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TProcedure extends TRouter['_def']['queries'][TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+    TInput extends inferProcedureInput<TProcedure>,
+  >(
+    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+    opts?: TRPCFetchQueryOptions<TInput, TRPCClientError<TRouter>, TOutput>,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/prefetching
+   */
+  prefetchInfiniteQuery<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TProcedure extends TRouter['_def']['queries'][TPath],
+    TOutput extends inferProcedureOutput<TProcedure>,
+    TInput extends inferProcedureInput<TProcedure>,
+  >(
+    pathAndInput: [path: TPath, ...args: inferHandlerInput<TProcedure>],
+    opts?: TRPCFetchInfiniteQueryOptions<
+      TInput,
+      TRPCClientError<TRouter>,
+      TOutput
+    >,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/query-invalidation
+   */
+  invalidateQueries<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput?: [TPath, TInput?] | TPath,
+    filters?: InvalidateQueryFilters,
+    options?: InvalidateOptions,
+  ): Promise<void>;
+  /**
+   * @link https://react-query.tanstack.com/guides/query-invalidation
+   */
+  invalidateQueries(
+    filters?: InvalidateQueryFilters,
+    options?: InvalidateOptions,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientrefetchqueries
+   */
+  refetchQueries<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+    filters?: RefetchQueryFilters,
+    options?: RefetchOptions,
+  ): Promise<void>;
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientrefetchqueries
+   */
+  refetchQueries(
+    filters?: RefetchQueryFilters,
+    options?: RefetchOptions,
+  ): Promise<void>;
+
+  /**
+   * @link https://react-query.tanstack.com/guides/query-cancellation
+   */
+  cancelQuery<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+    options?: CancelOptions,
+  ): Promise<void>;
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientsetquerydata
+   */
+  setQueryData<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+    TOutput extends inferProcedureOutput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+    updater: Updater<TOutput | undefined, TOutput | undefined>,
+    options?: SetDataOptions,
+  ): void;
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  getQueryData<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+    TOutput extends inferProcedureOutput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+  ): TOutput | undefined;
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  setInfiniteQueryData<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+    TOutput extends inferProcedureOutput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+    updater: Updater<
+      InfiniteData<TOutput> | undefined,
+      InfiniteData<TOutput> | undefined
+    >,
+    options?: SetDataOptions,
+  ): void;
+  /**
+   * @link https://react-query.tanstack.com/reference/QueryClient#queryclientgetquerydata
+   */
+  getInfiniteQueryData<
+    TPath extends keyof TRouter['_def']['queries'] & string,
+    TInput extends inferProcedureInput<TRouter['_def']['queries'][TPath]>,
+    TOutput extends inferProcedureOutput<TRouter['_def']['queries'][TPath]>,
+  >(
+    pathAndInput: [TPath, TInput?],
+  ): InfiniteData<TOutput> | undefined;
+}
+
+export const TRPCContext = createContext(null as any);

package/src/internals/getArrayQueryKey.test.ts

@@ -0,0 +1,41 @@
+import { getArrayQueryKey } from './getArrayQueryKey';
+
+test('getArrayQueryKey', () => {
+  expect(getArrayQueryKey('foo')).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+    ]
+  `);
+  expect(getArrayQueryKey(['foo'])).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+    ]
+  `);
+  expect(getArrayQueryKey(['foo', 'bar'])).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "foo",
+      ],
+      "bar",
+    ]
+  `);
+  expect(getArrayQueryKey([undefined, 'bar'])).toMatchInlineSnapshot(`
+    Array [
+      Array [],
+      "bar",
+    ]
+  `);
+  expect(getArrayQueryKey(['post.byId', '1'])).toMatchInlineSnapshot(`
+    Array [
+      Array [
+        "post",
+        "byId",
+      ],
+      "1",
+    ]
+  `);
+});

package/src/internals/getArrayQueryKey.ts

@@ -0,0 +1,18 @@
+/**
+ * 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. This function converts from the `.` separated
+ * path passed around internally by both the legacy and proxy implementation.
+ * https://github.com/trpc/trpc/issues/2611
+ */
+export function getArrayQueryKey(
+  queryKey: string | [string] | [string, ...unknown[]] | unknown[],
+): [string[]] | [string[], ...unknown[]] | [] {
+  const queryKeyArrayed = Array.isArray(queryKey) ? queryKey : [queryKey];
+  const [path, ...input] = queryKeyArrayed;
+
+  const arrayPath =
+    typeof path !== 'string' || path === '' ? [] : path.split('.');
+
+  return [arrayPath, ...input];
+}

package/src/internals/getQueryKey.ts

@@ -0,0 +1,10 @@
+/**
+ * We treat `undefined` as an input the same as omitting an `input`
+ * https://github.com/trpc/trpc/issues/2290
+ */
+export function getQueryKey(
+  path: string,
+  input: unknown,
+): [string] | [string, unknown] {
+  return input === undefined ? [path] : [path, input];
+}

package/src/interop.ts

@@ -0,0 +1,25 @@
+// interop:
+import { AnyRouter } from '@trpc/server';
+import { CreateTRPCReact, createHooksInternalProxy } from './createTRPCReact';
+import {
+  CreateReactQueryHooks,
+  createHooksInternal,
+} from './shared/hooks/createHooksInternal';
+
+/**
+ * @deprecated use `createTRPCReact` instead
+ */
+export function createReactQueryHooks<
+  TRouter extends AnyRouter,
+  TSSRContext = unknown,
+>(): CreateReactQueryHooks<TRouter, TSSRContext> & {
+  proxy: CreateTRPCReact<TRouter, TSSRContext>;
+} {
+  const trpc = createHooksInternal<TRouter, TSSRContext>();
+  const proxy = createHooksInternalProxy<TRouter, TSSRContext>(trpc);
+
+  return {
+    ...trpc,
+    proxy,
+  };
+}