@orpc/react 0.0.0

package/src/use-queries/builder.test-d.ts

@@ -0,0 +1,29 @@
+import type { Promisable } from '@orpc/server'
+import { orpcClient } from '../../tests/orpc'
+import { createUseQueriesBuilder } from './builder'
+
+it('createUseQueriesBuilder', () => {
+  const builder = createUseQueriesBuilder({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+  })
+
+  expectTypeOf<Parameters<typeof builder>[0]>().toEqualTypeOf<{
+    id: string
+  }>()
+
+  const result = builder({ id: '123' }, { throwOnError: true })
+
+  builder({ id: '123' })
+  //   @ts-expect-error invalid input
+  builder({ id: 123 })
+
+  if (typeof result.queryFn === 'function') {
+    expectTypeOf(result.queryFn({} as any)).toEqualTypeOf<
+      Promisable<{
+        id: string
+        name: string
+      }>
+    >()
+  }
+})

package/src/use-queries/builder.test.ts

@@ -0,0 +1,25 @@
+import { orpcClient } from '../../tests/orpc'
+import { createUseQueriesBuilder } from './builder'
+
+it('createUseQueriesBuilder', async () => {
+  const builder = createUseQueriesBuilder({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+  })
+
+  const options = builder({ id: '123' })
+
+  expect(options.queryKey).toEqual([
+    ['user', 'find'],
+    { input: { id: '123' }, type: 'query' },
+  ])
+
+  expect(options.queryFn).toBeInstanceOf(Function)
+
+  const result = await (options as any).queryFn({} as any)
+
+  expect(result).toEqual({
+    id: '123',
+    name: 'name-123',
+  })
+})

package/src/use-queries/builder.ts

@@ -0,0 +1,72 @@
+import type { ProcedureClient } from '@orpc/client'
+import type { Schema, SchemaInput, SchemaOutput } from '@orpc/contract'
+import type {} from '@orpc/server'
+import type { SetOptional } from '@orpc/shared'
+import type {
+  DefaultError,
+  OmitKeyof,
+  QueriesPlaceholderDataFunction,
+  QueryKey,
+  UseQueryOptions,
+} from '@tanstack/react-query'
+import { getQueryKeyFromPath } from '../tanstack-key'
+
+type UseQueryOptionsForUseQueries<
+  TQueryFnData,
+  TError = DefaultError,
+  TData = TQueryFnData,
+  TQueryKey extends QueryKey = QueryKey,
+> = OmitKeyof<
+  UseQueryOptions<TQueryFnData, TError, TData, TQueryKey>,
+  'placeholderData'
+> & {
+  placeholderData?: TQueryFnData | QueriesPlaceholderDataFunction<TQueryFnData>
+}
+
+export interface UseQueriesBuilder<
+  TInputSchema extends Schema,
+  TOutputSchema extends Schema,
+  THandlerOutput extends SchemaOutput<TOutputSchema>,
+> {
+  (
+    input: SchemaInput<TInputSchema>,
+    options?: SetOptional<
+      UseQueryOptionsForUseQueries<SchemaOutput<TOutputSchema, THandlerOutput>>,
+      'queryFn' | 'queryKey'
+    >,
+  ): UseQueryOptionsForUseQueries<SchemaOutput<TOutputSchema, THandlerOutput>>
+}
+
+export interface CreateUseQueriesBuilderOptions<
+  TInputSchema extends Schema,
+  TOutputSchema extends Schema,
+  THandlerOutput extends SchemaOutput<TOutputSchema>,
+> {
+  client: ProcedureClient<TInputSchema, TOutputSchema, THandlerOutput>
+
+  /**
+   * The path of procedure on server
+   */
+  path: string[]
+}
+
+export function createUseQueriesBuilder<
+  TInputSchema extends Schema = undefined,
+  TOutputSchema extends Schema = undefined,
+  THandlerOutput extends
+    SchemaOutput<TOutputSchema> = SchemaOutput<TOutputSchema>,
+>(
+  options: CreateUseQueriesBuilderOptions<
+    TInputSchema,
+    TOutputSchema,
+    THandlerOutput
+  >,
+): UseQueriesBuilder<TInputSchema, TOutputSchema, THandlerOutput> {
+  return (input, options_) => {
+    return {
+      queryKey: getQueryKeyFromPath(options.path, { input, type: 'query' }),
+      queryFn: () => options.client(input),
+      ...options_,
+    }
+  }
+}

package/src/use-queries/builders.test-d.ts

@@ -0,0 +1,30 @@
+import { orpcClient } from '../../tests/orpc'
+import { createUseQueriesBuilder } from './builder'
+import { createUseQueriesBuilders } from './builders'
+
+it('createUseQueriesBuilders', () => {
+  const builder = createUseQueriesBuilders({
+    client: orpcClient,
+  })
+
+  expectTypeOf(builder.user.find).toEqualTypeOf(
+    createUseQueriesBuilder({
+      client: orpcClient.user.find,
+      path: ['user', 'find'],
+    }),
+  )
+
+  expectTypeOf(builder.user.list).toEqualTypeOf(
+    createUseQueriesBuilder({
+      client: orpcClient.user.list,
+      path: ['user', 'list'],
+    }),
+  )
+
+  expectTypeOf(builder.ping).toEqualTypeOf(
+    createUseQueriesBuilder({
+      client: orpcClient.ping,
+      path: ['ping'],
+    }),
+  )
+})

package/src/use-queries/builders.test.tsx

@@ -0,0 +1,29 @@
+import { orpcClient } from '../../tests/orpc'
+import { createUseQueriesBuilder } from './builder'
+import { createUseQueriesBuilders } from './builders'
+
+it('createUseQueriesBuilders', async () => {
+  const builder = createUseQueriesBuilders({
+    client: orpcClient,
+  })
+
+  const e1 = builder.user.find({ id: '123' })
+  const a1 = createUseQueriesBuilder({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+  })({ id: '123' })
+
+  expect(e1.queryKey).toEqual(a1.queryKey)
+
+  expect(await (e1 as any).queryFn()).toEqual(await (a1 as any).queryFn())
+
+  const e2 = builder.user.list({})
+  const a2 = createUseQueriesBuilder({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+  })({})
+
+  expect(e2.queryKey).toEqual(a2.queryKey)
+
+  expect(await (e2 as any).queryFn()).toEqual(await (a2 as any).queryFn())
+})

package/src/use-queries/builders.ts

@@ -0,0 +1,101 @@
+import type {
+  RouterClientWithContractRouter,
+  RouterClientWithRouter,
+} from '@orpc/client'
+import type {
+  ContractProcedure,
+  ContractRouter,
+  SchemaOutput,
+} from '@orpc/contract'
+import type { Procedure, Router } from '@orpc/server'
+import type {} from '@tanstack/react-query'
+import { type UseQueriesBuilder, createUseQueriesBuilder } from './builder'
+
+export type UseQueriesBuildersWithContractRouter<
+  TRouter extends ContractRouter,
+> = {
+  [K in keyof TRouter]: TRouter[K] extends ContractProcedure<
+    infer UInputSchema,
+    infer UOutputSchema
+  >
+    ? UseQueriesBuilder<
+        UInputSchema,
+        UOutputSchema,
+        SchemaOutput<UOutputSchema>
+      >
+    : TRouter[K] extends ContractRouter
+      ? UseQueriesBuildersWithContractRouter<TRouter[K]>
+      : never
+}
+
+export type UseQueriesBuildersWithRouter<TRouter extends Router<any>> = {
+  [K in keyof TRouter]: TRouter[K] extends Procedure<
+    any,
+    any,
+    infer UInputSchema,
+    infer UOutputSchema,
+    infer UHandlerOutput
+  >
+    ? UseQueriesBuilder<UInputSchema, UOutputSchema, UHandlerOutput>
+    : TRouter[K] extends Router<any>
+      ? UseQueriesBuildersWithRouter<TRouter[K]>
+      : never
+}
+
+export interface CreateUseQueriesBuildersOptions<
+  TRouter extends Router<any> | ContractRouter,
+> {
+  client: TRouter extends Router<any>
+    ? RouterClientWithRouter<TRouter>
+    : TRouter extends ContractRouter
+      ? RouterClientWithContractRouter<TRouter>
+      : never
+
+  /**
+   * The path of router on server
+   */
+  path?: string[]
+}
+
+export function createUseQueriesBuilders<
+  TRouter extends Router<any> | ContractRouter,
+>(
+  options: CreateUseQueriesBuildersOptions<TRouter>,
+): TRouter extends Router<any>
+  ? UseQueriesBuildersWithRouter<TRouter>
+  : TRouter extends ContractRouter
+    ? UseQueriesBuildersWithContractRouter<TRouter>
+    : never {
+  const path = options.path ?? []
+  const client = options.client as any
+
+  /**
+   * For sure root is not procedure so do not create builder on root
+   */
+  const builder = path.length ? createUseQueriesBuilder({ client, path }) : {}
+
+  return new Proxy(builder, {
+    get(target, key) {
+      const value = Reflect.get(target, key)
+
+      if (typeof key !== 'string') {
+        return value
+      }
+
+      const nextBuilders = createUseQueriesBuilders({
+        client: client[key],
+        path: [...path, key],
+      })
+
+      if (typeof value !== 'function') {
+        return nextBuilders
+      }
+
+      return new Proxy(value, {
+        get(_, key) {
+          return Reflect.get(nextBuilders, key)
+        },
+      })
+    },
+  }) as any
+}

package/src/use-queries/hook.test-d.ts

@@ -0,0 +1,64 @@
+import type { SchemaOutput } from '@orpc/contract'
+import {
+  ORPCContext,
+  type UserListOutputSchema,
+  type UserSchema,
+  orpcClient,
+} from '../../tests/orpc'
+import { createUseQueriesBuilders } from './builders'
+import { useQueriesFactory } from './hook'
+
+describe('useQueriesFactory', () => {
+  const useQueries = useQueriesFactory({
+    context: ORPCContext,
+  })
+
+  it('simple', () => {
+    const [findQuery, listQuery] = useQueries((o) => {
+      expectTypeOf(o).toEqualTypeOf(
+        createUseQueriesBuilders({ client: orpcClient }),
+      )
+
+      return [o.user.find({ id: '123' }), o.user.list({})]
+    })
+
+    expectTypeOf(findQuery.data).toEqualTypeOf<
+      SchemaOutput<typeof UserSchema> | undefined
+    >()
+
+    expectTypeOf(listQuery.data).toEqualTypeOf<
+      SchemaOutput<typeof UserListOutputSchema> | undefined
+    >()
+  })
+
+  it('with combine', () => {
+    const [findData, listData] = useQueries(
+      (o) => {
+        expectTypeOf(o).toEqualTypeOf(
+          createUseQueriesBuilders({ client: orpcClient }),
+        )
+
+        return [o.user.find({ id: '123' }), o.user.list({})]
+      },
+      ([findQuery, listQuery]) => {
+        expectTypeOf(findQuery.data).toEqualTypeOf<
+          SchemaOutput<typeof UserSchema> | undefined
+        >()
+
+        expectTypeOf(listQuery.data).toEqualTypeOf<
+          SchemaOutput<typeof UserListOutputSchema> | undefined
+        >()
+
+        return [findQuery.data, listQuery.data] as const
+      },
+    )
+
+    expectTypeOf(findData).toEqualTypeOf<
+      SchemaOutput<typeof UserSchema> | undefined
+    >()
+
+    expectTypeOf(listData).toEqualTypeOf<
+      SchemaOutput<typeof UserListOutputSchema> | undefined
+    >()
+  })
+})

package/src/use-queries/hook.test.tsx

@@ -0,0 +1,89 @@
+import { renderHook, waitFor } from '@testing-library/react'
+import { ORPCContext, orpcClient, wrapper } from '../../tests/orpc'
+import { createUseQueriesBuilders } from './builders'
+import { useQueriesFactory } from './hook'
+
+describe('useQueriesFactory', () => {
+  const useQueries = useQueriesFactory({
+    context: ORPCContext,
+  })
+
+  it('simple', async () => {
+    const queries = renderHook(
+      () =>
+        useQueries((o) => {
+          expectTypeOf(o).toEqualTypeOf(
+            createUseQueriesBuilders({ client: orpcClient }),
+          )
+
+          return [o.user.find({ id: '123' }), o.user.list({})]
+        }),
+      { wrapper: wrapper },
+    )
+
+    await waitFor(() =>
+      expect(queries.result.current[0].data).toEqual({
+        id: '123',
+        name: 'name-123',
+      }),
+    )
+
+    await waitFor(() =>
+      expect(queries.result.current[1].data).toEqual({
+        nextCursor: 2,
+        users: [
+          {
+            id: 'id-0',
+            name: 'number-0',
+          },
+          {
+            id: 'id-1',
+            name: 'number-1',
+          },
+        ],
+      }),
+    )
+  })
+
+  it('with combine', async () => {
+    const data = renderHook(
+      () =>
+        useQueries(
+          (o) => {
+            expectTypeOf(o).toEqualTypeOf(
+              createUseQueriesBuilders({ client: orpcClient }),
+            )
+
+            return [o.user.find({ id: '123' }), o.user.list({})]
+          },
+          ([findQuery, listQuery]) => {
+            return [findQuery.data, listQuery.data] as const
+          },
+        ),
+      { wrapper },
+    )
+
+    await waitFor(() =>
+      expect(data.result.current[0]).toEqual({
+        id: '123',
+        name: 'name-123',
+      }),
+    )
+
+    await waitFor(() =>
+      expect(data.result.current[1]).toEqual({
+        nextCursor: 2,
+        users: [
+          {
+            id: 'id-0',
+            name: 'number-0',
+          },
+          {
+            id: 'id-1',
+            name: 'number-1',
+          },
+        ],
+      }),
+    )
+  })
+})

package/src/use-queries/hook.ts

@@ -0,0 +1,57 @@
+import type { ContractRouter } from '@orpc/contract'
+import type { Router } from '@orpc/server'
+import {
+  type QueriesOptions,
+  type QueriesResults,
+  useQueries,
+} from '@tanstack/react-query'
+import { type ORPCContext, useORPCContext } from '../react-context'
+import {
+  type UseQueriesBuildersWithContractRouter,
+  type UseQueriesBuildersWithRouter,
+  createUseQueriesBuilders,
+} from './builders'
+
+export interface UseQueriesWithContractRouter<TRouter extends ContractRouter> {
+  <T extends Array<any> = [], TCombinedResult = QueriesResults<T>>(
+    build: (
+      builders: UseQueriesBuildersWithContractRouter<TRouter>,
+    ) => [...QueriesOptions<T>],
+    combine?: (result: QueriesResults<T>) => TCombinedResult,
+  ): TCombinedResult
+}
+
+export interface UseQueriesWithRouter<TRouter extends Router<any>> {
+  <T extends Array<any> = [], TCombinedResult = QueriesResults<T>>(
+    build: (
+      builders: UseQueriesBuildersWithRouter<TRouter>,
+    ) => [...QueriesOptions<T>],
+    combine?: (result: QueriesResults<T>) => TCombinedResult,
+  ): TCombinedResult
+}
+
+export interface UseQueriesFactoryOptions<
+  TRouter extends Router<any> | ContractRouter,
+> {
+  context: ORPCContext<TRouter>
+}
+
+export function useQueriesFactory<TRouter extends Router<any> | ContractRouter>(
+  options: UseQueriesFactoryOptions<TRouter>,
+): TRouter extends Router<any>
+  ? UseQueriesWithRouter<TRouter>
+  : TRouter extends ContractRouter
+    ? UseQueriesWithContractRouter<TRouter>
+    : never {
+  const hook = (build: any, combine?: any) => {
+    const orpc = useORPCContext(options.context)
+    const builders = createUseQueriesBuilders({ client: orpc.client as any })
+
+    return useQueries({
+      queries: build(builders),
+      combine: combine,
+    })
+  }
+
+  return hook as any
+}