feat(query, colada): add .call utility for direct client call (#138)

Author: unnoq

packages/react-query/src/procedure-utils.test-d.ts

@@ -1,4 +1,4 @@
-import type { ErrorFromErrorMap } from '@orpc/contract'
+import type { Client, ErrorFromErrorMap } from '@orpc/contract'
 import type { InfiniteData } from '@tanstack/react-query'
 import type { baseErrorMap } from '../../contract/tests/shared'
 import type { ProcedureUtils } from './procedure-utils'
@@ -16,6 +16,17 @@ describe('ProcedureUtils', () => {
     ErrorFromErrorMap<typeof baseErrorMap>
   >
 
+  it('.call', () => {
+    expectTypeOf(utils.call).toEqualTypeOf<
+      Client<
+        { batch?: boolean } | undefined,
+        UtilsInput,
+        UtilsOutput,
+        ErrorFromErrorMap<typeof baseErrorMap>
+      >
+    >()
+  })
+
   describe('.queryOptions', () => {
     it('can optional options', () => {
       const requiredUtils = {} as ProcedureUtils<{ batch?: boolean }, 'input', UtilsOutput, Error>

packages/react-query/src/procedure-utils.test.ts

@@ -13,6 +13,10 @@ describe('createProcedureUtils', () => {
   const client = vi.fn().mockResolvedValue('__output__')
   const utils = createProcedureUtils(client, ['ping'])
 
+  it('.call', () => {
+    expect(utils.call).toBe(client)
+  })
+
   it('.queryOptions', async () => {
     const options = utils.queryOptions({ input: { search: '__search__' }, context: { batch: '__batch__' } })
 

packages/react-query/src/procedure-utils.ts

@@ -5,6 +5,8 @@ import type { InfiniteOptionsBase, InfiniteOptionsIn, MutationOptionsBase, Mutat
 import { buildKey } from './key'
 
 export interface ProcedureUtils<TClientContext, TInput, TOutput, TError extends Error> {
+  call: Client<TClientContext, TInput, TOutput, TError>
+
   queryOptions<U, USelectData = TOutput>(
     ...rest: MaybeOptionalOptions<
       U & QueryOptionsIn<TClientContext, TInput, TOutput, TError, USelectData>
@@ -27,6 +29,8 @@ export function createProcedureUtils<TClientContext, TInput, TOutput, TError ext
   path: string[],
 ): ProcedureUtils<TClientContext, TInput, TOutput, TError> {
   return {
+    call: client,
+
     queryOptions(...[{ input, context, ...rest } = {}]) {
       return {
         queryKey: buildKey(path, { type: 'query', input: input as any }),

packages/react-query/tests/e2e.test-d.ts

@@ -1,6 +1,7 @@
 import type { InfiniteData } from '@tanstack/react-query'
 import { isDefinedError } from '@orpc/contract'
 import { useInfiniteQuery, useMutation, useQueries, useQuery, useSuspenseInfiniteQuery, useSuspenseQuery } from '@tanstack/react-query'
+import { orpc as client } from '../../client/tests/shared'
 import { orpc, queryClient } from './shared'
 
 it('.key', () => {
@@ -14,6 +15,10 @@ it('.key', () => {
   orpc.ping.key({ input: { input: 'INVALID' } })
 })
 
+it('.call', () => {
+  expectTypeOf(orpc.ping.call).toEqualTypeOf(client.ping)
+})
+
 describe('.queryOptions', () => {
   it('useQuery', () => {
     const query = useQuery(orpc.ping.queryOptions({

packages/react-query/tests/e2e.test.tsx

@@ -9,6 +9,10 @@ beforeEach(() => {
   vi.clearAllMocks()
 })
 
+it('case: call directly', async () => {
+  expect(await orpc.ping.call({ input: 123 })).toEqual({ output: '123' })
+})
+
 it('case: with useQuery', async () => {
   const { result } = renderHook(() => useQuery(orpc.nested.ping.queryOptions({ input: { input: 123 } }), queryClient))
 

packages/vue-colada/src/procedure-utils.test-d.ts

@@ -1,4 +1,4 @@
-import type { ErrorFromErrorMap } from '@orpc/contract'
+import type { Client, ErrorFromErrorMap } from '@orpc/contract'
 import type { baseErrorMap } from '../../contract/tests/shared'
 import type { ProcedureUtils } from './procedure-utils'
 import { useMutation, useQuery } from '@pinia/colada'
@@ -15,6 +15,17 @@ describe('ProcedureUtils', () => {
     ErrorFromErrorMap<typeof baseErrorMap>
   >
 
+  it('.call', () => {
+    expectTypeOf(utils.call).toEqualTypeOf<
+      Client<
+        { batch?: boolean } | undefined,
+        UtilsInput,
+        UtilsOutput,
+        ErrorFromErrorMap<typeof baseErrorMap>
+      >
+    >()
+  })
+
   describe('.queryOptions', () => {
     it('can optional options', () => {
       const requiredUtils = {} as ProcedureUtils<{ batch?: boolean }, 'input', UtilsOutput, Error>

packages/vue-colada/src/procedure-utils.test.ts

@@ -13,6 +13,15 @@ beforeEach(() => {
   buildKeySpy.mockReturnValue(['__mocked__'])
 })
 
+it('.call', () => {
+  const client = vi.fn(
+    (...[input]) => Promise.resolve(input?.toString()),
+  )
+  const utils = createProcedureUtils(client, ['ping'])
+
+  expect(utils.call).toBe(client)
+})
+
 describe('queryOptions', () => {
   const client = vi.fn(
     (...[input]) => Promise.resolve(input?.toString()),

packages/vue-colada/src/procedure-utils.ts

@@ -6,6 +6,8 @@ import { buildKey } from './key'
 import { unrefDeep } from './utils'
 
 export interface ProcedureUtils<TClientContext, TInput, TOutput, TError extends Error> {
+  call: Client<TClientContext, TInput, TOutput, TError>
+
   queryOptions(
     ...rest: MaybeOptionalOptions<
       QueryOptionsIn<TClientContext, TInput, TOutput, TError>
@@ -24,6 +26,8 @@ export function createProcedureUtils<TClientContext, TInput, TOutput, TError ext
   path: string[],
 ): ProcedureUtils<TClientContext, TInput, TOutput, TError> {
   return {
+    call: client,
+
     queryOptions(...[{ input, context, ...rest } = {}]) {
       return {
         key: computed(() => buildKey(path, { input: unrefDeep(input) })),

packages/vue-colada/tests/e2e.test-d.ts

@@ -1,6 +1,7 @@
 import { isDefinedError } from '@orpc/contract'
 import { useMutation, useQuery, useQueryCache } from '@pinia/colada'
 import { computed, ref } from 'vue'
+import { orpc as client } from '../../client/tests/shared'
 import { orpc } from './shared'
 
 it('.key', () => {
@@ -15,6 +16,10 @@ it('.key', () => {
   orpc.ping.key({ input: { input: 'INVALID' } })
 })
 
+it('.call', () => {
+  expectTypeOf(orpc.ping.call).toEqualTypeOf(client.ping)
+})
+
 describe('.queryOptions', () => {
   it('useQuery', () => {
     const query = useQuery(orpc.ping.queryOptions({

packages/vue-colada/tests/e2e.test.tsx

@@ -8,6 +8,10 @@ beforeEach(() => {
   vi.clearAllMocks()
 })
 
+it('case: call directly', async () => {
+  expect(await orpc.ping.call({ input: 123 })).toEqual({ output: '123' })
+})
+
 it('case: with useQuery', async () => {
   const mounted = mount(defineComponent({
     setup() {