Merge pull request #697 from seamapi/evan/cx-409-add-pagination-support-to-useseamquery

feat: Add useSeamInfiniteQuery

Author: razor-x

package-lock.json

@@ -145,7 +145,7 @@
     "@rxfork/r2wc-react-to-web-component": "^2.4.0",
     "@seamapi/fake-devicedb": "^1.6.1",
     "@seamapi/fake-seam-connect": "^1.76.0",
-    "@seamapi/http": "^1.40.0",
+    "@seamapi/http": "^1.40.1",
     "@seamapi/types": "^1.395.3",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",

package.json

@@ -12,6 +12,7 @@ export * from './devices/use-device-providers.js'
 export * from './devices/use-devices.js'
 export * from './SeamProvider.js'
 export * from './use-seam-client.js'
+export * from './use-seam-infinite-query.js'
 export * from './use-seam-mutation.js'
 export * from './use-seam-mutation-without-workspace.js'
 export * from './use-seam-query.js'

src/lib/seam/index.ts

@@ -0,0 +1,81 @@
+import type {
+  SeamHttpApiError,
+  SeamHttpEndpointPaginatedQueryPaths,
+  SeamHttpEndpoints,
+  SeamHttpRequest,
+  SeamPageCursor,
+} from '@seamapi/http/connect'
+import {
+  useInfiniteQuery,
+  type UseInfiniteQueryOptions,
+  type UseInfiniteQueryResult,
+} from '@tanstack/react-query'
+
+import { useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseSeamInfiniteQueryParameters<
+  T extends SeamHttpEndpointPaginatedQueryPaths,
+> = Parameters<SeamHttpEndpoints[T]>[0]
+
+export type UseSeamInfiniteQueryResult<
+  T extends SeamHttpEndpointPaginatedQueryPaths,
+> = UseInfiniteQueryResult<QueryData<T>, SeamHttpApiError>
+
+export function useSeamInfiniteQuery<
+  T extends SeamHttpEndpointPaginatedQueryPaths,
+>(
+  endpointPath: T,
+  parameters?: UseSeamInfiniteQueryParameters<T>,
+  options: Parameters<SeamHttpEndpoints[T]>[1] &
+    QueryOptions<QueryData<T>, SeamHttpApiError> = {}
+): UseSeamInfiniteQueryResult<T> {
+  const { endpointClient: client, queryKeyPrefixes } = useSeamClient()
+  return useInfiniteQuery({
+    enabled: client != null,
+    ...options,
+    queryKey: [
+      ...queryKeyPrefixes,
+      ...endpointPath.split('/').filter((v) => v !== ''),
+      parameters,
+    ],
+    initialPageParam: null,
+    getNextPageParam: (lastPage) => lastPage.nextPageCursor,
+    queryFn: async ({ pageParam }) => {
+      if (client == null)
+        return {
+          data: [] as Awaited<ReturnType<SeamHttpEndpoints[T]>>,
+          nextPageCursor: null,
+        }
+      // Using @ts-expect-error over any is preferred, but not possible here because TypeScript will run out of memory.
+      // Type assertion is needed here for performance reasons. The types are correct at runtime.
+      const endpoint = client[endpointPath] as (...args: any) => any
+      const request = endpoint(parameters, options)
+      const pages = client.createPaginator(request as SeamHttpRequest<any, any>)
+      if (pageParam == null) {
+        const [data, { nextPageCursor }] = await pages.firstPage()
+        return {
+          data: data as Awaited<ReturnType<SeamHttpEndpoints[T]>>,
+          nextPageCursor,
+        }
+      }
+      // Type assertion is needed for pageParam since the Seam API expects a branded PageCursor type.
+      const [data, { nextPageCursor }] = await pages.nextPage(
+        pageParam as SeamPageCursor
+      )
+      return {
+        data: data as Awaited<ReturnType<SeamHttpEndpoints[T]>>,
+        nextPageCursor,
+      }
+    },
+  })
+}
+
+interface QueryData<T extends SeamHttpEndpointPaginatedQueryPaths> {
+  data: Awaited<ReturnType<SeamHttpEndpoints[T]>>
+  nextPageCursor: SeamPageCursor | null
+}
+
+type QueryOptions<X, Y> = Omit<
+  UseInfiniteQueryOptions<X, Y>,
+  'queryKey' | 'queryFn' | 'initialPageParam' | 'getNextPageParam'
+>

src/lib/seam/use-seam-infinite-query.ts

@@ -23,7 +23,7 @@ export type UseSeamMutationWithoutWorkspaceResult<
   UseSeamMutationWithoutWorkspaceVariables<T>
 >
 
-export function UseSeamMutationWithoutWorkspace<
+export function useSeamMutationWithoutWorkspace<
   T extends SeamHttpEndpointWithoutWorkspaceMutationPaths,
 >(
   endpointPath: T,