@orpc/react 0.0.0

package/src/procedure-utils.test.tsx

@@ -0,0 +1,330 @@
+import { orpcClient, queryClient } from '../tests/orpc'
+import { createProcedureUtils } from './procedure-utils'
+
+beforeEach(() => {
+  queryClient.clear()
+})
+
+describe('fetchQuery', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const data = await utils.fetchQuery({ id: '123455' })
+
+    expect(data.id).toEqual('123455')
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [
+          ['user', 'find'],
+          { input: { id: '123455' }, type: 'query' },
+        ],
+      })[0]?.[1],
+    ).toBe(data)
+  })
+
+  it('on error', () => {
+    // @ts-expect-error invalid input
+    expect(utils.fetchQuery({ id: {} })).rejects.toThrowError(
+      'Validation input failed',
+    )
+  })
+})
+
+describe('fetchInfiniteQuery', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const data = await utils.fetchInfiniteQuery({ input: {} })
+
+    expect(data).toMatchObject({
+      pageParams: [undefined],
+      pages: [
+        {
+          nextCursor: 2,
+          users: [{ name: 'number-0' }, { name: 'number-1' }],
+        },
+      ],
+    })
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [['user', 'list'], { input: {}, type: 'infinite' }],
+      })[0]?.[1],
+    ).toBe(data)
+  })
+
+  it('on error', () => {
+    expect(
+      // @ts-expect-error invalid input
+      utils.fetchInfiniteQuery({ input: { keyword: {} } }),
+    ).rejects.toThrowError('Validation input failed')
+  })
+})
+
+describe('prefetchQuery', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const result = await utils.prefetchQuery({ id: '123455' })
+    expect(result).toEqual(undefined)
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [
+          ['user', 'find'],
+          { input: { id: '123455' }, type: 'query' },
+        ],
+      })[0]?.[1],
+    ).toEqual({
+      id: '123455',
+      name: 'name-123455',
+    })
+  })
+
+  it('on error', () => {
+    expect(
+      // @ts-expect-error invalid input
+      utils.prefetchQuery({ id: 1244 }),
+    ).resolves.toEqual(undefined)
+  })
+})
+
+describe('prefetchInfiniteQuery', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const result = await utils.prefetchInfiniteQuery({ input: {} })
+    expect(result).toEqual(undefined)
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [['user', 'list'], { input: {}, type: 'infinite' }],
+      })[0]?.[1],
+    ).toMatchObject({
+      pageParams: [undefined],
+      pages: [
+        {
+          nextCursor: 2,
+          users: [{ name: 'number-0' }, { name: 'number-1' }],
+        },
+      ],
+    })
+  })
+
+  it('on error', () => {
+    expect(
+      // @ts-expect-error invalid input
+      utils.prefetchInfiniteQuery({ keyword: 1222 }, {}),
+    ).resolves.toEqual(undefined)
+  })
+})
+
+describe('ensureQueryData', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const data = await utils.ensureQueryData({ id: '123455' })
+
+    expect(data.id).toEqual('123455')
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [
+          ['user', 'find'],
+          { input: { id: '123455' }, type: 'query' },
+        ],
+      })[0]?.[1],
+    ).toBe(data)
+  })
+
+  it('on error', () => {
+    // @ts-expect-error invalid input
+    expect(utils.ensureQueryData({ id: {} })).rejects.toThrowError(
+      'Validation input failed',
+    )
+  })
+})
+
+describe('ensureInfiniteQuery', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const data = await utils.ensureInfiniteQueryData({ input: {} })
+
+    expect(data).toMatchObject({
+      pageParams: [undefined],
+      pages: [
+        {
+          nextCursor: 2,
+          users: [{ name: 'number-0' }, { name: 'number-1' }],
+        },
+      ],
+    })
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [['user', 'list'], { input: {}, type: 'infinite' }],
+      })[0]?.[1],
+    ).toBe(data)
+  })
+
+  it('on error', () => {
+    expect(
+      // @ts-expect-error invalid input
+      utils.ensureInfiniteQueryData({ input: { keyword: {} } }),
+    ).rejects.toThrowError('Validation input failed')
+  })
+})
+
+describe('getQueryData', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    expect(utils.getQueryData({ id: '123455' })).toEqual(undefined)
+    const data = await utils.ensureQueryData({ id: '123455' })
+    expect(utils.getQueryData({ id: '123455' })).toBe(data)
+  })
+})
+
+describe('getInfiniteQueryData', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    expect(utils.getInfiniteQueryData({})).toEqual(undefined)
+    const data = await utils.ensureInfiniteQueryData({ input: {} })
+    expect(utils.getInfiniteQueryData({})).toBe(data)
+  })
+})
+
+describe('getQueryState', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    expect(utils.getQueryState({ id: '123455' })).toEqual(undefined)
+    const data = await utils.ensureQueryData({ id: '123455' })
+    expect(utils.getQueryState({ id: '123455' })).toMatchObject({
+      status: 'success',
+      data,
+    })
+  })
+})
+
+describe('getInfiniteQueryState', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    expect(utils.getInfiniteQueryState({})).toEqual(undefined)
+    const data = await utils.ensureInfiniteQueryData({ input: {} })
+    expect(utils.getInfiniteQueryState({})).toMatchObject({
+      status: 'success',
+      data,
+    })
+  })
+})
+
+describe('setQueryData', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.find,
+    path: ['user', 'find'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const original = await utils.ensureQueryData({ id: '1222' })
+
+    const user = {
+      id: '1222',
+      name: 'name-1222-fake-fake',
+    }
+
+    utils.setQueryData({ id: user.id }, (data) => {
+      expect(data).toBe(original)
+
+      return user
+    })
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [['user', 'find'], { input: { id: user.id }, type: 'query' }],
+      })[0]?.[1],
+    ).toEqual(user)
+  })
+})
+
+describe('getInfiniteQueryData', () => {
+  const utils = createProcedureUtils({
+    client: orpcClient.user.list,
+    path: ['user', 'list'],
+    queryClient: queryClient,
+  })
+
+  it('on success', async () => {
+    const original = await utils.ensureInfiniteQueryData({ input: {} })
+
+    const data = {
+      pages: [],
+      pageParams: [],
+    }
+
+    utils.setInfiniteQueryData({}, (ori) => {
+      expect(ori).toBe(original)
+
+      return data
+    })
+
+    expect(
+      queryClient.getQueriesData({
+        exact: true,
+        queryKey: [['user', 'list'], { input: {}, type: 'infinite' }],
+      })[0]?.[1],
+    ).toEqual(data)
+  })
+})

package/src/procedure-utils.ts

@@ -0,0 +1,315 @@
+import type { ProcedureClient } from '@orpc/client'
+import type { Schema, SchemaInput, SchemaOutput } from '@orpc/contract'
+import type { PartialOnUndefinedDeep, SetOptional } from '@orpc/shared'
+import type {
+  DefaultError,
+  EnsureInfiniteQueryDataOptions,
+  EnsureQueryDataOptions,
+  FetchInfiniteQueryOptions,
+  FetchQueryOptions,
+  InfiniteData,
+  QueryClient,
+  QueryKey,
+  QueryState,
+  SetDataOptions,
+  Updater,
+} from '@tanstack/react-query'
+import { getQueryKeyFromPath } from './tanstack-key'
+import type { SchemaInputForInfiniteQuery } from './types'
+
+export interface ProcedureUtils<
+  TInputSchema extends Schema,
+  TOutputSchema extends Schema,
+  THandlerOutput extends SchemaOutput<TOutputSchema>,
+> {
+  fetchQuery(
+    input: SchemaInput<TInputSchema>,
+    options?: SetOptional<
+      FetchQueryOptions<SchemaOutput<TOutputSchema, THandlerOutput>>,
+      'queryKey' | 'queryFn'
+    >,
+  ): Promise<SchemaOutput<TOutputSchema, THandlerOutput>>
+  fetchInfiniteQuery(
+    options: PartialOnUndefinedDeep<
+      SetOptional<
+        FetchInfiniteQueryOptions<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          DefaultError,
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          QueryKey,
+          SchemaInput<TInputSchema>['cursor']
+        >,
+        'queryKey' | 'queryFn'
+      > & {
+        input: SchemaInputForInfiniteQuery<TInputSchema>
+      }
+    >,
+  ): Promise<
+    InfiniteData<
+      SchemaOutput<TOutputSchema, THandlerOutput>,
+      SchemaInput<TInputSchema>['cursor']
+    >
+  >
+
+  prefetchQuery(
+    input: SchemaInput<TInputSchema>,
+    options?: SetOptional<
+      FetchQueryOptions<SchemaOutput<TOutputSchema, THandlerOutput>>,
+      'queryKey' | 'queryFn'
+    >,
+  ): Promise<void>
+  prefetchInfiniteQuery(
+    options: PartialOnUndefinedDeep<
+      SetOptional<
+        FetchInfiniteQueryOptions<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          DefaultError,
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          QueryKey,
+          SchemaInput<TInputSchema>['cursor']
+        >,
+        'queryKey' | 'queryFn'
+      > & {
+        input: SchemaInputForInfiniteQuery<TInputSchema>
+      }
+    >,
+  ): Promise<void>
+
+  getQueryData(
+    input: SchemaInput<TInputSchema>,
+  ): SchemaOutput<TOutputSchema, THandlerOutput> | undefined
+  getInfiniteQueryData(
+    input: SchemaInputForInfiniteQuery<TInputSchema>,
+  ):
+    | InfiniteData<
+        SchemaOutput<TOutputSchema, THandlerOutput>,
+        SchemaInput<TInputSchema>['cursor']
+      >
+    | undefined
+
+  ensureQueryData(
+    input: SchemaInput<TInputSchema>,
+    options?: SetOptional<
+      EnsureQueryDataOptions<SchemaOutput<TOutputSchema, THandlerOutput>>,
+      'queryFn' | 'queryKey'
+    >,
+  ): Promise<SchemaOutput<TOutputSchema, THandlerOutput>>
+  ensureInfiniteQueryData(
+    options: PartialOnUndefinedDeep<
+      SetOptional<
+        EnsureInfiniteQueryDataOptions<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          DefaultError,
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          QueryKey,
+          SchemaInput<TInputSchema>['cursor']
+        >,
+        'queryKey' | 'queryFn'
+      > & {
+        input: SchemaInputForInfiniteQuery<TInputSchema>
+      }
+    >,
+  ): Promise<
+    InfiniteData<
+      SchemaOutput<TOutputSchema, THandlerOutput>,
+      SchemaInput<TInputSchema>['cursor']
+    >
+  >
+
+  getQueryState(
+    input: SchemaInput<TInputSchema>,
+  ): QueryState<SchemaOutput<TOutputSchema, THandlerOutput>> | undefined
+  getInfiniteQueryState(
+    input: SchemaInputForInfiniteQuery<TInputSchema>,
+  ):
+    | QueryState<
+        InfiniteData<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          SchemaInput<TInputSchema>['cursor']
+        >
+      >
+    | undefined
+
+  setQueryData(
+    input: SchemaInput<TInputSchema>,
+    updater: Updater<
+      SchemaOutput<TOutputSchema, THandlerOutput> | undefined,
+      SchemaOutput<TOutputSchema, THandlerOutput> | undefined
+    >,
+    options?: SetDataOptions,
+  ): SchemaOutput<TOutputSchema, THandlerOutput> | undefined
+  setInfiniteQueryData(
+    input: SchemaInputForInfiniteQuery<TInputSchema>,
+    updater: Updater<
+      | InfiniteData<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          SchemaInput<TInputSchema>['cursor']
+        >
+      | undefined,
+      | InfiniteData<
+          SchemaOutput<TOutputSchema, THandlerOutput>,
+          SchemaInput<TInputSchema>['cursor']
+        >
+      | undefined
+    >,
+    options?: SetDataOptions,
+  ):
+    | InfiniteData<
+        SchemaOutput<TOutputSchema, THandlerOutput>,
+        SchemaInput<TInputSchema>['cursor']
+      >
+    | undefined
+}
+
+export interface CreateProcedureUtilsOptions<
+  TInputSchema extends Schema = undefined,
+  TOutputSchema extends Schema = undefined,
+  THandlerOutput extends
+    SchemaOutput<TOutputSchema> = SchemaOutput<TOutputSchema>,
+> {
+  client: ProcedureClient<TInputSchema, TOutputSchema, THandlerOutput>
+  queryClient: QueryClient
+
+  /**
+   * The path of procedure on sever
+   */
+  path: string[]
+}
+
+export function createProcedureUtils<
+  TInputSchema extends Schema,
+  TOutputSchema extends Schema,
+  THandlerOutput extends SchemaOutput<TOutputSchema>,
+>(
+  options: CreateProcedureUtilsOptions<
+    TInputSchema,
+    TOutputSchema,
+    THandlerOutput
+  >,
+): ProcedureUtils<TInputSchema, TOutputSchema, THandlerOutput> {
+  return {
+    fetchQuery(input, options_) {
+      return options.queryClient.fetchQuery({
+        queryKey: getQueryKeyFromPath(options.path, { input, type: 'query' }),
+        queryFn: () => options.client(input),
+        ...options_,
+      })
+    },
+    fetchInfiniteQuery(options_) {
+      const { input, ...rest } = options_
+      return options.queryClient.fetchInfiniteQuery({
+        queryKey: getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+        queryFn: ({ pageParam }) => {
+          return options.client({ ...(input as any), pageParam } as any)
+        },
+        ...(rest as any),
+      })
+    },
+
+    prefetchQuery(input, options_) {
+      return options.queryClient.prefetchQuery({
+        queryKey: getQueryKeyFromPath(options.path, {
+          input,
+          type: 'query',
+        }),
+        queryFn: () => options.client(input),
+        ...options_,
+      })
+    },
+    prefetchInfiniteQuery(options_) {
+      const { input, ...rest } = options_
+      return options.queryClient.prefetchInfiniteQuery({
+        queryKey: getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+        queryFn: ({ pageParam }) => {
+          return options.client({ ...(input as any), cursor: pageParam } as any)
+        },
+        ...(rest as any),
+      })
+    },
+
+    getQueryData(input) {
+      return options.queryClient.getQueryData(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'query',
+        }),
+      )
+    },
+    getInfiniteQueryData(input) {
+      return options.queryClient.getQueryData(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+      )
+    },
+
+    ensureQueryData(input, options_) {
+      return options.queryClient.ensureQueryData({
+        queryKey: getQueryKeyFromPath(options.path, {
+          input,
+          type: 'query',
+        }),
+        queryFn: () => options.client(input),
+        ...options_,
+      })
+    },
+    ensureInfiniteQueryData(options_) {
+      const { input, ...rest } = options_
+      return options.queryClient.ensureInfiniteQueryData({
+        queryKey: getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+        queryFn: ({ pageParam }) => {
+          return options.client({ ...(input as any), pageParam } as any)
+        },
+        ...(rest as any),
+      })
+    },
+
+    getQueryState(input) {
+      return options.queryClient.getQueryState(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'query',
+        }),
+      )
+    },
+    getInfiniteQueryState(input) {
+      return options.queryClient.getQueryState(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+      )
+    },
+
+    setQueryData(input, updater, options_) {
+      return options.queryClient.setQueryData(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'query',
+        }),
+        updater,
+        options_,
+      )
+    },
+    setInfiniteQueryData(input, updater, options_) {
+      return options.queryClient.setQueryData(
+        getQueryKeyFromPath(options.path, {
+          input,
+          type: 'infinite',
+        }),
+        updater,
+        options_,
+      )
+    },
+  }
+}

package/src/react-context.ts

@@ -0,0 +1,43 @@
+import type {
+  RouterClientWithContractRouter,
+  RouterClientWithRouter,
+} from '@orpc/client'
+import type { ContractRouter } from '@orpc/contract'
+import type { Router } from '@orpc/server'
+import type { QueryClient } from '@tanstack/react-query'
+import { type Context, createContext, useContext } from 'react'
+
+export interface ORPCContextValue<
+  TRouter extends ContractRouter | Router<any>,
+> {
+  client: TRouter extends ContractRouter
+    ? RouterClientWithContractRouter<TRouter>
+    : TRouter extends Router<any>
+      ? RouterClientWithRouter<TRouter>
+      : never
+  queryClient: QueryClient
+}
+
+export type ORPCContext<TRouter extends ContractRouter | Router<any>> = Context<
+  ORPCContextValue<TRouter> | undefined
+>
+
+export function createORPCContext<
+  TRouter extends ContractRouter | Router<any>,
+>(): ORPCContext<TRouter> {
+  return createContext(undefined as any)
+}
+
+export function useORPCContext<TRouter extends ContractRouter | Router<any>>(
+  context: ORPCContext<TRouter>,
+): ORPCContextValue<TRouter> {
+  const value = useContext(context)
+
+  if (!value) {
+    throw new Error(
+      'useORPCContext must be used within a <ORPCContext.Provider>, please see the docs',
+    )
+  }
+
+  return value
+}