@orpc/react 0.0.0-unsafe-pr-2-20241118033608

package/src/react-hooks.ts

@@ -0,0 +1,102 @@
+import type {
+  ContractProcedure,
+  ContractRouter,
+  SchemaOutput,
+} from '@orpc/contract'
+import type { Procedure, Router } from '@orpc/server'
+import { type GeneralHooks, createGeneralHooks } from './general-hooks'
+import { orpcPathSymbol } from './orpc-path'
+import { type ProcedureHooks, createProcedureHooks } from './procedure-hooks'
+import type { ORPCContext } from './react-context'
+
+export type ORPCHooksWithContractRouter<TRouter extends ContractRouter> = {
+  [K in keyof TRouter]: TRouter[K] extends ContractProcedure<
+    infer UInputSchema,
+    infer UOutputSchema
+  >
+    ? ProcedureHooks<UInputSchema, UOutputSchema, SchemaOutput<UOutputSchema>> &
+        GeneralHooks<UInputSchema, UOutputSchema, SchemaOutput<UOutputSchema>>
+    : TRouter[K] extends ContractRouter
+      ? ORPCHooksWithContractRouter<TRouter[K]>
+      : never
+} & GeneralHooks<undefined, undefined, unknown>
+
+export type ORPCHooksWithRouter<TRouter extends Router<any>> = {
+  [K in keyof TRouter]: TRouter[K] extends Procedure<
+    any,
+    any,
+    infer UInputSchema,
+    infer UOutputSchema,
+    infer UHandlerOutput
+  >
+    ? ProcedureHooks<UInputSchema, UOutputSchema, UHandlerOutput> &
+        GeneralHooks<UInputSchema, UOutputSchema, UHandlerOutput>
+    : TRouter[K] extends Router<any>
+      ? ORPCHooksWithRouter<TRouter[K]>
+      : never
+} & GeneralHooks<undefined, undefined, unknown>
+
+export interface CreateORPCHooksOptions<
+  TRouter extends ContractRouter | Router<any>,
+> {
+  context: ORPCContext<TRouter>
+
+  /**
+   * The path of the router.
+   *
+   * @internal
+   */
+  path?: string[]
+}
+
+export function createORPCHooks<TRouter extends ContractRouter | Router<any>>(
+  options: CreateORPCHooksOptions<TRouter>,
+): TRouter extends Router<any>
+  ? ORPCHooksWithRouter<TRouter>
+  : TRouter extends ContractRouter
+    ? ORPCHooksWithContractRouter<TRouter>
+    : never {
+  const path = options.path ?? []
+  const generalHooks = createGeneralHooks({ context: options.context, path })
+
+  // for sure root is not procedure, so do not it procedure hooks on root
+  const procedureHooks = path.length
+    ? createProcedureHooks({
+        context: options.context,
+        path,
+      })
+    : {}
+
+  return new Proxy(
+    {
+      [orpcPathSymbol]: path,
+
+      ...generalHooks,
+      ...procedureHooks,
+    },
+    {
+      get(target, key) {
+        const value = Reflect.get(target, key)
+
+        if (typeof key !== 'string') {
+          return value
+        }
+
+        const nextHooks = createORPCHooks({
+          context: options.context,
+          path: [...path, key],
+        })
+
+        if (typeof value !== 'function') {
+          return nextHooks
+        }
+
+        return new Proxy(value, {
+          get(_, key) {
+            return Reflect.get(nextHooks, key)
+          },
+        })
+      },
+    },
+  ) as any
+}

package/src/react-utils.ts

@@ -0,0 +1,110 @@
+import type {} from '@orpc/client'
+import type {
+  ContractProcedure,
+  ContractRouter,
+  SchemaOutput,
+} from '@orpc/contract'
+import type { Procedure, Router } from '@orpc/server'
+import { type GeneralUtils, createGeneralUtils } from './general-utils'
+import { type ProcedureUtils, createProcedureUtils } from './procedure-utils'
+import type { ORPCContextValue } from './react-context'
+
+export type ORPCUtilsWithContractRouter<TRouter extends ContractRouter> = {
+  [K in keyof TRouter]: TRouter[K] extends ContractProcedure<
+    infer UInputSchema,
+    infer UOutputSchema
+  >
+    ? ProcedureUtils<UInputSchema, UOutputSchema, SchemaOutput<UOutputSchema>> &
+        GeneralUtils<UInputSchema, UOutputSchema, SchemaOutput<UOutputSchema>>
+    : TRouter[K] extends ContractRouter
+      ? ORPCUtilsWithContractRouter<TRouter[K]>
+      : never
+} & GeneralUtils<undefined, undefined, unknown>
+
+export type ORPCUtilsWithRouter<TRouter extends Router<any>> = {
+  [K in keyof TRouter]: TRouter[K] extends Procedure<
+    any,
+    any,
+    infer UInputSchema,
+    infer UOutputSchema,
+    infer UHandlerOutput
+  >
+    ? ProcedureUtils<UInputSchema, UOutputSchema, UHandlerOutput> &
+        GeneralUtils<UInputSchema, UOutputSchema, UHandlerOutput>
+    : TRouter[K] extends Router<any>
+      ? ORPCUtilsWithRouter<TRouter[K]>
+      : never
+} & GeneralUtils<undefined, undefined, unknown>
+
+export interface CreateORPCUtilsOptions<
+  TRouter extends ContractRouter | Router<any>,
+> {
+  contextValue: ORPCContextValue<TRouter>
+
+  /**
+   * The path of the router.
+   *
+   * @internal
+   */
+  path?: string[]
+}
+
+export function createORPCUtils<TRouter extends ContractRouter | Router<any>>(
+  options: CreateORPCUtilsOptions<TRouter>,
+): TRouter extends Router<any>
+  ? ORPCUtilsWithRouter<TRouter>
+  : TRouter extends ContractRouter
+    ? ORPCUtilsWithContractRouter<TRouter>
+    : never {
+  const path = options.path ?? []
+  const client = options.contextValue.client as any
+
+  const generalUtils = createGeneralUtils({
+    queryClient: options.contextValue.queryClient,
+    path,
+  })
+
+  // for sure root is not procedure, so do not it procedure utils on root
+  const procedureUtils = path.length
+    ? createProcedureUtils({
+        client,
+        queryClient: options.contextValue.queryClient,
+        path,
+      })
+    : {}
+
+  return new Proxy(
+    {
+      ...generalUtils,
+      ...procedureUtils,
+    },
+    {
+      get(target, key) {
+        const value = Reflect.get(target, key)
+
+        if (typeof key !== 'string') {
+          return value
+        }
+
+        const nextUtils = createORPCUtils({
+          ...options,
+          contextValue: {
+            ...options.contextValue,
+            client: client[key],
+          },
+          path: [...path, key],
+        })
+
+        if (typeof value !== 'function') {
+          return nextUtils
+        }
+
+        return new Proxy(value, {
+          get(_, key) {
+            return Reflect.get(nextUtils, key)
+          },
+        })
+      },
+    },
+  ) as any
+}

package/src/react.test-d.ts

@@ -0,0 +1,89 @@
+import type { SchemaOutput } from '@orpc/contract'
+import type { QueryClient } from '@tanstack/react-query'
+import {
+  ORPCContext,
+  type UserFindInputSchema,
+  type UserSchema,
+  orpc,
+  orpcClient,
+} from '../tests/orpc'
+import type { GeneralHooks } from './general-hooks'
+import type { GeneralUtils } from './general-utils'
+import type { ProcedureHooks } from './procedure-hooks'
+import type { ProcedureUtils } from './procedure-utils'
+import { useQueriesFactory } from './use-queries/hook'
+
+describe('useUtils', () => {
+  const utils = orpc.useUtils()
+
+  it('router level', () => {
+    expectTypeOf(utils).toMatchTypeOf<
+      GeneralUtils<undefined, undefined, unknown>
+    >()
+
+    expectTypeOf(utils.user).toMatchTypeOf<
+      GeneralUtils<undefined, undefined, unknown>
+    >()
+  })
+
+  it('procedure level', () => {
+    expectTypeOf(utils.user.find).toMatchTypeOf<
+      GeneralUtils<
+        typeof UserFindInputSchema,
+        typeof UserSchema,
+        SchemaOutput<typeof UserSchema>
+      >
+    >()
+
+    expectTypeOf(utils.user.find).toMatchTypeOf<
+      ProcedureUtils<
+        typeof UserFindInputSchema,
+        typeof UserSchema,
+        SchemaOutput<typeof UserSchema>
+      >
+    >()
+  })
+})
+
+it('useContext', () => {
+  const context = orpc.useContext()
+
+  expectTypeOf(context.client).toEqualTypeOf(orpcClient)
+  expectTypeOf(context.queryClient).toEqualTypeOf<QueryClient>()
+})
+
+it('useQueries', () => {
+  expectTypeOf(orpc.useQueries).toEqualTypeOf(
+    useQueriesFactory({ context: ORPCContext }),
+  )
+})
+
+describe('hooks', () => {
+  it('router level', () => {
+    expectTypeOf(orpc).toMatchTypeOf<
+      GeneralHooks<undefined, undefined, unknown>
+    >()
+
+    expectTypeOf(orpc.user).toMatchTypeOf<
+      GeneralHooks<undefined, undefined, unknown>
+    >()
+  })
+
+  it('procedure level', () => {
+    expectTypeOf(orpc.user.find).toMatchTypeOf<
+      GeneralHooks<
+        typeof UserFindInputSchema,
+        typeof UserSchema,
+        SchemaOutput<typeof UserSchema>
+      >
+    >()
+
+    expectTypeOf(orpc.user.find).toMatchTypeOf<
+      ProcedureHooks<
+        typeof UserFindInputSchema,
+        typeof UserSchema,
+        SchemaOutput<typeof UserSchema>
+      >
+    >()
+  })
+})

package/src/react.test.tsx

@@ -0,0 +1,102 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { orpc, orpcClient, queryClient, wrapper } from '../tests/orpc'
+
+beforeEach(() => {
+  queryClient.clear()
+})
+
+it('useUtils', async () => {
+  const { result } = renderHook(() => orpc.useUtils(), { wrapper: wrapper })
+
+  const promise = result.current.user.find.ensureQueryData({ id: '1' })
+  expect(result.current.user.isFetching()).toBe(1)
+  const data = await promise
+  expect(result.current.user.isFetching()).toBe(0)
+
+  let old: any
+  result.current.user.setQueriesData({}, (old_: any) => {
+    old = old_
+  })
+
+  expect(data).toEqual({
+    id: '1',
+    name: 'name-1',
+  })
+  expect(old).toEqual(data)
+})
+
+it('useContext', async () => {
+  const { result } = renderHook(() => orpc.useContext(), { wrapper: wrapper })
+
+  expect(result.current.client).toBe(orpcClient)
+  expect(result.current.queryClient).toBe(queryClient)
+
+  expect(() => renderHook(() => orpc.useContext())).throws(
+    'useORPCContext must be used within a <ORPCContext.Provider>, please see the docs',
+  )
+})
+
+it('useQueries', async () => {
+  const queries = renderHook(
+    () => orpc.useQueries((o) => [o.user.find({ id: '123' })]),
+    { wrapper: wrapper },
+  )
+
+  await waitFor(() =>
+    expect(queries.result.current[0].data).toEqual({
+      id: '123',
+      name: 'name-123',
+    }),
+  )
+})
+
+it('hooks', async () => {
+  const isFetching = renderHook(() => orpc.user.useIsFetching(), {
+    wrapper: wrapper,
+  })
+  const isMutating = renderHook(() => orpc.user.useIsMutating(), {
+    wrapper: wrapper,
+  })
+
+  expect(isFetching.result.current).toBe(0)
+  expect(isMutating.result.current).toBe(0)
+
+  const query = renderHook(() => orpc.user.find.useQuery({ id: '1' }), {
+    wrapper: wrapper,
+  })
+  const mutation = renderHook(() => orpc.user.create.useMutation(), {
+    wrapper: wrapper,
+  })
+
+  await waitFor(() => expect(query.result.current.status).toEqual('pending'))
+
+  expect(isFetching.result.current).toBe(1)
+  expect(isMutating.result.current).toBe(0)
+
+  await waitFor(() =>
+    expect(query.result.current.data).toEqual({
+      id: '1',
+      name: 'name-1',
+    }),
+  )
+
+  expect(isFetching.result.current).toBe(0)
+  expect(isMutating.result.current).toBe(0)
+
+  mutation.result.current.mutate({ name: 'name-2' })
+
+  await waitFor(() => expect(mutation.result.current.status).toEqual('pending'))
+
+  expect(isFetching.result.current).toBe(0)
+  expect(isMutating.result.current).toBe(1)
+
+  await waitFor(() => expect(mutation.result.current.status).toEqual('success'))
+
+  expect(isFetching.result.current).toBe(0)
+  expect(isMutating.result.current).toBe(0)
+
+  expect(mutation.result.current.data).toEqual({
+    id: expect.any(String),
+    name: 'name-2',
+  })
+})

package/src/react.tsx

@@ -0,0 +1,80 @@
+import type { ContractRouter } from '@orpc/contract'
+import type { Router } from '@orpc/server'
+import {
+  type ORPCContext,
+  type ORPCContextValue,
+  createORPCContext,
+  useORPCContext,
+} from './react-context'
+import {
+  type ORPCHooksWithContractRouter,
+  type ORPCHooksWithRouter,
+  createORPCHooks,
+} from './react-hooks'
+import {
+  type ORPCUtilsWithContractRouter,
+  type ORPCUtilsWithRouter,
+  createORPCUtils,
+} from './react-utils'
+import {
+  type UseQueriesWithContractRouter,
+  type UseQueriesWithRouter,
+  useQueriesFactory,
+} from './use-queries/hook'
+
+export type ORPCReactWithContractRouter<TRouter extends ContractRouter> =
+  ORPCHooksWithContractRouter<TRouter> & {
+    useContext: () => ORPCContextValue<TRouter>
+    useUtils: () => ORPCUtilsWithContractRouter<TRouter>
+    useQueries: () => UseQueriesWithContractRouter<TRouter>
+  }
+
+export type ORPCReactWithRouter<TRouter extends Router<any>> =
+  ORPCHooksWithRouter<TRouter> & {
+    useContext: () => ORPCContextValue<TRouter>
+    useUtils: () => ORPCUtilsWithRouter<TRouter>
+    useQueries: UseQueriesWithRouter<TRouter>
+  }
+
+export function createORPCReact<
+  TRouter extends ContractRouter | Router<any>,
+>(): {
+  orpc: TRouter extends Router<any>
+    ? ORPCReactWithRouter<TRouter>
+    : TRouter extends ContractRouter
+      ? ORPCReactWithContractRouter<TRouter>
+      : never
+  ORPCContext: ORPCContext<TRouter>
+} {
+  const Context = createORPCContext<TRouter>()
+  const useContext = () => useORPCContext(Context)
+  const useUtils = () => createORPCUtils({ contextValue: useContext() })
+  const useQueries = useQueriesFactory({ context: Context })
+  const hooks = createORPCHooks({ context: Context })
+
+  const orpc = new Proxy(
+    {
+      useContext,
+      useUtils,
+      useQueries,
+    },
+    {
+      get(target, key) {
+        const value = Reflect.get(target, key)
+        const nextHooks = Reflect.get(hooks, key)
+
+        if (typeof value !== 'function') {
+          return nextHooks
+        }
+
+        return new Proxy(value, {
+          get(_, key) {
+            return Reflect.get(nextHooks, key)
+          },
+        })
+      },
+    },
+  )
+
+  return { orpc: orpc as any, ORPCContext: Context }
+}

package/src/tanstack-key.test-d.ts

@@ -0,0 +1,35 @@
+import { orpc } from '../tests/orpc'
+import { getMutationKey, getQueryKey } from './tanstack-key'
+
+describe('query', () => {
+  it('required valid orpc', () => {
+    getQueryKey(orpc.ping)
+    getQueryKey(orpc.user.find)
+
+    // @ts-expect-error invalid orpc
+    getQueryKey({})
+
+    // @ts-expect-error cannot use in root
+    getQueryKey(orpc)
+  })
+
+  it('infer input', () => {
+    getQueryKey(orpc.user.find, { input: { id: '1' } })
+
+    // @ts-expect-error invalid input
+    getQueryKey(orpc.user.find, { input: { id: 1234 } })
+  })
+})
+
+describe('mutation', () => {
+  it('required valid orpc', () => {
+    getMutationKey(orpc.ping)
+    getMutationKey(orpc.user.find)
+
+    // @ts-expect-error invalid orpc
+    getMutationKey({})
+
+    // @ts-expect-error cannot use in root
+    getMutationKey(orpc)
+  })
+})

package/src/tanstack-key.test.ts

@@ -0,0 +1,62 @@
+import { orpc } from '../tests/orpc'
+import {
+  getMutationKey,
+  getMutationKeyFromPath,
+  getQueryKey,
+  getQueryKeyFromPath,
+} from './tanstack-key'
+
+describe('query', () => {
+  it('from path', () => {
+    expect(getQueryKeyFromPath(['user', 'find'])).toEqual([
+      ['user', 'find'],
+      {},
+    ])
+
+    expect(
+      getQueryKeyFromPath(['user', 'find'], {
+        input: { id: '1' },
+      }),
+    ).toEqual([['user', 'find'], { input: { id: '1' } }])
+
+    expect(
+      getQueryKeyFromPath(['user', 'find'], {
+        input: { id: '1' },
+        type: 'query',
+      }),
+    ).toEqual([['user', 'find'], { input: { id: '1' }, type: 'query' }])
+
+    expect(
+      getQueryKeyFromPath(['user', 'find'], {
+        type: 'infinite',
+      }),
+    ).toEqual([['user', 'find'], { type: 'infinite' }])
+  })
+
+  it('from orpc', () => {
+    expect(getQueryKey(orpc.ping)).toEqual([['ping'], {}])
+
+    expect(getQueryKey(orpc.user.find)).toEqual([['user', 'find'], {}])
+
+    expect(getQueryKey(orpc.user.find, { input: { id: '1' } })).toEqual([
+      ['user', 'find'],
+      { input: { id: '1' } },
+    ])
+
+    expect(
+      getQueryKey(orpc.user.find, { input: { id: '1' }, type: 'infinite' }),
+    ).toEqual([['user', 'find'], { input: { id: '1' }, type: 'infinite' }])
+  })
+})
+
+describe('mutation', () => {
+  it('from path', () => {
+    expect(getMutationKeyFromPath(['user', 'create'])).toEqual([
+      ['user', 'create'],
+    ])
+  })
+
+  it('from orpc', () => {
+    expect(getMutationKey(orpc.user.create)).toEqual([['user', 'create']])
+  })
+})

package/src/tanstack-key.ts

@@ -0,0 +1,64 @@
+import type { SchemaInput } from '@orpc/contract'
+import type { PartialDeep } from '@orpc/shared'
+import type { MutationKey, QueryKey } from '@tanstack/react-query'
+import { getORPCPath } from './orpc-path'
+import type { ProcedureHooks } from './procedure-hooks'
+import type {
+  ORPCHooksWithContractRouter,
+  ORPCHooksWithRouter,
+} from './react-hooks'
+
+export type QueryType = 'query' | 'infinite' | undefined
+
+export interface GetQueryKeyOptions<TInput> {
+  input?: TInput
+  type?: QueryType
+}
+
+export function getQueryKey<
+  T extends
+    | ORPCHooksWithContractRouter<any>
+    | ORPCHooksWithRouter<any>
+    | ProcedureHooks<any, any, any>,
+>(
+  orpc: T,
+  options?: GetQueryKeyOptions<
+    T extends ProcedureHooks<infer UInputSchema, any, any>
+      ? PartialDeep<SchemaInput<UInputSchema>>
+      : unknown
+  >,
+): QueryKey {
+  const path = getORPCPath(orpc)
+  return getQueryKeyFromPath(path, options)
+}
+
+export function getQueryKeyFromPath(
+  path: string[],
+  options?: GetQueryKeyOptions<unknown>,
+): QueryKey {
+  const withInput =
+    options?.input !== undefined ? { input: options?.input } : {}
+  const withType = options?.type !== undefined ? { type: options?.type } : {}
+
+  return [
+    path,
+    {
+      ...withInput,
+      ...withType,
+    },
+  ]
+}
+
+export function getMutationKey<
+  T extends
+    | ORPCHooksWithContractRouter<any>
+    | ORPCHooksWithRouter<any>
+    | ProcedureHooks<any, any, any>,
+>(orpc: T): MutationKey {
+  const path = getORPCPath(orpc)
+  return getMutationKeyFromPath(path)
+}
+
+export function getMutationKeyFromPath(path: string[]): MutationKey {
+  return [path]
+}

package/src/tanstack-query.ts

@@ -0,0 +1,27 @@
+import type { SetOptional } from '@orpc/shared'
+import type {
+  InvalidateQueryFilters,
+  QueryFilters,
+} from '@tanstack/react-query'
+import type { QueryType } from './tanstack-key'
+
+export interface ORPCAdditionalQueryFilters<TFilterInput> {
+  /**
+   * The type of the query. useQuery=query, useInfiniteQuery=infinite
+   * If not specified, it will match all types.
+   */
+  queryType?: QueryType
+
+  /**
+   * The input of the query. If not specified, it will match all inputs.
+   */
+  input?: TFilterInput
+}
+
+export interface ORPCQueryFilters<TFilterInput>
+  extends SetOptional<QueryFilters, 'queryKey'>,
+    ORPCAdditionalQueryFilters<TFilterInput> {}
+
+export interface ORPCInvalidateQueryFilters<TFilterInput>
+  extends SetOptional<InvalidateQueryFilters, 'queryKey'>,
+    ORPCAdditionalQueryFilters<TFilterInput> {}

package/src/types.ts

@@ -0,0 +1,7 @@
+import type { Schema, SchemaInput } from '@orpc/contract'
+
+export type SchemaInputForInfiniteQuery<TInputSchema extends Schema> = Omit<
+  SchemaInput<TInputSchema>,
+  'cursor'
+> &
+  (Record<string | number, any> & { cursor?: never })