feat(query)!: redesign pageParam input to use a function and refine internal types (#126)

* react query - wip

* wip

* wip

* improve

* wip

* wip

* rename

* rename

* improve react query

* improve tests

* vue query - procedure utils tests

* vue query - general utils tests

* vue query - router utils

* e2e tests improve

* vue colada

* vue colada - rename files

* vue colada -unit tests

* vue colada - improve

* improve types

* improve types

* vue colada - e2e tests

* is object utils

* improve vue utils

* fix types

* update docs

* update pnpm lock

* fix tests

* improve tests

* improve tests

Author: unnoq

apps/content/content/docs/client/react-query.mdx

@@ -132,7 +132,7 @@ queryClient.invalidateQueries({ queryKey: orpc.posts.getPost.key({ input: { id:
 
 ## Infinite Queries
 
-Infinite queries require a `cursor` in the input field for pagination.
+Infinite queries require you define input as a function with `pageParam` as the first argument.
 
 ```tsx twoslash
 import { os, createRouterClient } from '@orpc/server';
@@ -158,15 +158,7 @@ const orpc = createORPCReactQueryUtils(client);
 export function MyComponent() {
   const query = useInfiniteQuery(
     orpc.user.list.infiniteOptions({
-      input: { limit: 10 },
-      getNextPageParam: (lastPage) => lastPage.nextCursor,
-      initialPageParam: 0,
-    })
-  );
-
-  const query2 = useSuspenseInfiniteQuery(
-    orpc.user.list.infiniteOptions({
-      input: { limit: 10 },
+      input: (pageParam) => ({ limit: 10, cursor: pageParam }),
       getNextPageParam: (lastPage) => lastPage.nextCursor,
       initialPageParam: 0,
     })

apps/content/content/docs/client/vue-query.mdx

@@ -73,7 +73,7 @@ queryClient.invalidateQueries({ queryKey: orpc.posts.getPost.key({ input: { id:
 
 ## Infinite Queries
 
-Infinite queries require a `cursor` in the input field for pagination.
+Infinite queries require you define input as a function with `pageParam` as the first argument.
 
 ```ts twoslash
 import { os, createRouterClient } from '@orpc/server';
@@ -97,7 +97,7 @@ const orpc = createORPCVueQueryUtils(client);
 
 const query = useInfiniteQuery(
   orpc.user.list.infiniteOptions({
-    input: { limit: 10 },
+    input: (pageParam) => ({ limit: 10, cursor: pageParam }),
     getNextPageParam: (lastPage) => lastPage.nextCursor,
     initialPageParam: 0,
   })

eslint.config.js

@@ -9,7 +9,7 @@ export default antfu({
     'react-refresh/only-export-components': 'off',
     'react/prefer-destructuring-assignment': 'off',
     'react/no-context-provider': 'off',
-    'ts/method-signature-style': ['error', 'method'],
+    'ts/method-signature-style': ['off'],
   },
 }, {
   files: ['**/*.test.ts', '**/*.test.tsx', '**/*.test-d.ts', '**/*.test-d.tsx', 'apps/content/examples/**', 'playgrounds/**'],

package.json

@@ -32,6 +32,7 @@
     "@testing-library/react": "^16.0.1",
     "@types/node": "^22.10.0",
     "@vitest/coverage-v8": "^3.0.4",
+    "@vue/test-utils": "^2.4.6",
     "eslint": "^9.15.0",
     "eslint-plugin-format": "^0.1.2",
     "eslint-plugin-react-hooks": "^5.0.0",

packages/client/tests/shared.ts

@@ -0,0 +1,31 @@
+import { RPCHandler } from '@orpc/server/fetch'
+import { router } from '../../server/tests/shared'
+import { createORPCClient } from '../src'
+import { RPCLink } from '../src/adapters/fetch'
+
+const rpcHandler = new RPCHandler(router)
+
+export type ClientContext = { cache?: string } | undefined
+
+const rpcLink = new RPCLink<ClientContext>({
+  url: 'http://localhost:3000',
+  fetch: async (url, init, context) => {
+    if (context?.cache) {
+      throw new Error(`cache=${context.cache} is not supported`)
+    }
+
+    const request = new Request(url, init)
+
+    const { matched, response } = await rpcHandler.handle(request, {
+      context: { db: 'postgres' },
+    })
+
+    if (!matched) {
+      throw new Error('No procedure matched')
+    }
+
+    return response
+  },
+})
+
+export const orpc = createORPCClient<typeof router, ClientContext>(rpcLink)

packages/contract/src/client.test-d.ts

@@ -1,5 +1,4 @@
 import type { Client } from './client'
-import type { AbortSignal } from './types'
 
 describe('client', () => {
   const fn: Client<unknown, string, number, Error> = async (...[input, options]) => {

packages/contract/src/client.ts

@@ -1,5 +1,3 @@
-import type { AbortSignal } from './types'
-
 export type ClientOptions<TClientContext> =
   & { signal?: AbortSignal }
   & (undefined extends TClientContext ? { context?: TClientContext } : { context: TClientContext })

packages/contract/src/index.ts

@@ -16,4 +16,3 @@ export * from './route'
 export * from './router'
 export * from './router-client'
 export * from './schema'
-export * from './types'