feat: Add useSeamQuery and useSeamMutation

razor-x · razor-x · commit a422c893b46c · 2025-06-27T14:23:22.000-07:00
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.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.37.0",
+    "@seamapi/http": "^1.38.3",
     "@seamapi/types": "^1.395.3",
     "@storybook/addon-designs": "^7.0.1",
     "@storybook/addon-essentials": "^7.0.2",
diff --git a/src/lib/seam/access-codes/use-access-code.ts b/src/lib/seam/access-codes/use-access-code.ts
@@ -6,15 +6,15 @@ import type { AccessCode } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseAccessCodeParams = AccessCodesGetParams
 
 export type UseAccessCodeData = AccessCode | null
 
 export function useAccessCode(
   params: UseAccessCodeParams
-): UseSeamQueryResult<'accessCode', UseAccessCodeData> {
+): UseSeamQueryResultLegacy<'accessCode', UseAccessCodeData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<UseAccessCodeData, SeamHttpApiError>({
     enabled: client != null,
diff --git a/src/lib/seam/access-codes/use-access-codes.ts b/src/lib/seam/access-codes/use-access-codes.ts
@@ -6,15 +6,15 @@ import type { AccessCode } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseAccessCodesParams = AccessCodesListParams
 
 export type UseAccessCodesData = AccessCode[]
 
 export function useAccessCodes(
   params: UseAccessCodesParams
-): UseSeamQueryResult<'accessCodes', UseAccessCodesData> {
+): UseSeamQueryResultLegacy<'accessCodes', UseAccessCodesData> {
   const { client } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/access-codes/use-create-access-code.ts b/src/lib/seam/access-codes/use-create-access-code.ts
@@ -1,39 +1,14 @@
-import type {
-  AccessCodesCreateBody,
-  SeamHttpApiError,
-} from '@seamapi/http/connect'
-import type { AccessCode } from '@seamapi/types/connect'
-import {
-  useMutation,
-  type UseMutationResult,
-  useQueryClient,
-} from '@tanstack/react-query'
-
-import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
-
-export type UseCreateAccessCodeParams = never
+import { useQueryClient } from '@tanstack/react-query'
 
-export type UseCreateAccessCodeData = AccessCode
-
-export type UseCreateAccessCodeMutationVariables = AccessCodesCreateBody
+import {
+  useSeamMutation,
+  type UseSeamMutationResult,
+} from '../use-seam-mutation.js'
 
-export function useCreateAccessCode(): UseMutationResult<
-  UseCreateAccessCodeData,
-  SeamHttpApiError,
-  UseCreateAccessCodeMutationVariables
-> {
-  const { client } = useSeamClient()
+export function useCreateAccessCode(): UseSeamMutationResult<'/access_codes/create'> {
   const queryClient = useQueryClient()
 
-  return useMutation<
-    UseCreateAccessCodeData,
-    SeamHttpApiError,
-    UseCreateAccessCodeMutationVariables
-  >({
-    mutationFn: async (variables) => {
-      if (client === null) throw new NullSeamClientError()
-      return await client.accessCodes.create(variables)
-    },
+  return useSeamMutation('/access_codes/create', {
     onSuccess: (data) => {
       queryClient.setQueryData(
         ['access_codes', 'get', { access_code_id: data.access_code_id }],
diff --git a/src/lib/seam/client-sessions/use-client-session.ts b/src/lib/seam/client-sessions/use-client-session.ts
@@ -3,13 +3,13 @@ import type { ClientSession } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseClientSessionParams = never
 
 export type UseClientSessionData = ClientSession | null
 
-export function useClientSession(): UseSeamQueryResult<
+export function useClientSession(): UseSeamQueryResultLegacy<
   'clientSession',
   UseClientSessionData
 > {
diff --git a/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts b/src/lib/seam/components/SupportedDeviceTable/use-device-model.ts
@@ -7,15 +7,15 @@ import type {
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelParams = DeviceModelsGetParams
 
 export type UseDeviceModelData = DeviceModel | null
 
 export function useDeviceModel(
   params: UseDeviceModelParams
-): UseSeamQueryResult<'deviceModel', UseDeviceModelData> {
+): UseSeamQueryResultLegacy<'deviceModel', UseDeviceModelData> {
   const { client: seam } = useSeamClient()
   const { data, ...rest } = useQuery<UseDeviceModelData, SeamHttpApiError>({
     enabled: seam != null,
diff --git a/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts b/src/lib/seam/components/SupportedDeviceTable/use-device-models.ts
@@ -7,15 +7,15 @@ import type {
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceModelsParams = DeviceModelsListParams
 
 export type UseDeviceModelsData = DeviceModel[]
 
 export function useDeviceModels(
   params?: UseDeviceModelsParams
-): UseSeamQueryResult<'deviceModels', UseDeviceModelsData> {
+): UseSeamQueryResultLegacy<'deviceModels', UseDeviceModelsData> {
   const { client: seam } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/components/SupportedDeviceTable/use-manufacturer.ts b/src/lib/seam/components/SupportedDeviceTable/use-manufacturer.ts
@@ -7,15 +7,15 @@ import type {
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseManufacturerParams = ManufacturersGetParams
 
 export type UseManufacturerData = Manufacturer | null
 
 export function useManufacturer(
   params: UseManufacturerParams
-): UseSeamQueryResult<'manufacturer', UseManufacturerData> {
+): UseSeamQueryResultLegacy<'manufacturer', UseManufacturerData> {
   const { client: seam } = useSeamClient()
   const { data, ...rest } = useQuery<UseManufacturerData, SeamHttpApiError>({
     enabled: seam != null,
diff --git a/src/lib/seam/components/SupportedDeviceTable/use-manufacturers.ts b/src/lib/seam/components/SupportedDeviceTable/use-manufacturers.ts
@@ -7,15 +7,15 @@ import type {
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseManufacturersParams = ManufacturersListParams
 
 export type UseManufacturersData = Manufacturer[]
 
 export function useManufacturers(
   params?: UseManufacturersParams
-): UseSeamQueryResult<'manufacturers', UseManufacturersData> {
+): UseSeamQueryResultLegacy<'manufacturers', UseManufacturersData> {
   const { client: seam } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/connected-accounts/use-connected-account.ts b/src/lib/seam/connected-accounts/use-connected-account.ts
@@ -6,15 +6,15 @@ import type { ConnectedAccount } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseConnectedAccountParams = ConnectedAccountsGetParams
 
 export type UseConnectedAccountData = ConnectedAccount | null
 
 export function useConnectedAccount(
   params: UseConnectedAccountParams
-): UseSeamQueryResult<'connectedAccount', UseConnectedAccountData> {
+): UseSeamQueryResultLegacy<'connectedAccount', UseConnectedAccountData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<UseConnectedAccountData, SeamHttpApiError>(
     {
diff --git a/src/lib/seam/devices/use-device-providers.ts b/src/lib/seam/devices/use-device-providers.ts
@@ -6,15 +6,15 @@ import type { DeviceProvider } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceProvidersParams = DevicesListDeviceProvidersParams
 
 export type UseDeviceProvidersData = DeviceProvider[]
 
 export function useDeviceProviders(
   params?: UseDeviceProvidersParams
-): UseSeamQueryResult<'deviceProviders', UseDeviceProvidersData> {
+): UseSeamQueryResultLegacy<'deviceProviders', UseDeviceProvidersData> {
   const { client } = useSeamClient()
 
   const { data, ...rest } = useQuery<UseDeviceProvidersData, SeamHttpApiError>({
diff --git a/src/lib/seam/devices/use-device.ts b/src/lib/seam/devices/use-device.ts
@@ -3,15 +3,15 @@ import type { Device } from '@seamapi/types/connect'
 import { useQuery } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDeviceParams = DevicesGetParams
 
 export type UseDeviceData = Device | null
 
 export function useDevice(
   params: UseDeviceParams
-): UseSeamQueryResult<'device', UseDeviceData> {
+): UseSeamQueryResultLegacy<'device', UseDeviceData> {
   const { client } = useSeamClient()
   const { data, ...rest } = useQuery<UseDeviceData, SeamHttpApiError>({
     enabled: client != null,
diff --git a/src/lib/seam/devices/use-devices.ts b/src/lib/seam/devices/use-devices.ts
@@ -3,15 +3,15 @@ import type { Device } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseDevicesParams = DevicesListParams
 
 export type UseDevicesData = Device[]
 
 export function useDevices(
   params?: UseDevicesParams
-): UseSeamQueryResult<'devices', UseDevicesData> {
+): UseSeamQueryResultLegacy<'devices', UseDevicesData> {
   const { client } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/events/use-events.ts b/src/lib/seam/events/use-events.ts
@@ -3,7 +3,7 @@ import type { SeamEvent } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseEventsParams = EventsListParams
 
@@ -16,7 +16,7 @@ export interface UseEventsOptions {
 export function useEvents(
   params?: UseEventsParams,
   { refetchInterval }: UseEventsOptions = {}
-): UseSeamQueryResult<'events', UseEventsData> {
+): UseSeamQueryResultLegacy<'events', UseEventsData> {
   const { client } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/index.ts b/src/lib/seam/index.ts
@@ -12,4 +12,6 @@ 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-mutation.js'
+export * from './use-seam-query.js'
 export * from './use-seam-query-result.js'
diff --git a/src/lib/seam/noise-sensors/use-noise-thresholds.ts b/src/lib/seam/noise-sensors/use-noise-thresholds.ts
@@ -6,15 +6,15 @@ import type { NoiseThreshold } from '@seamapi/types/connect'
 import { useQuery, useQueryClient } from '@tanstack/react-query'
 
 import { useSeamClient } from 'lib/seam/use-seam-client.js'
-import type { UseSeamQueryResult } from 'lib/seam/use-seam-query-result.js'
+import type { UseSeamQueryResultLegacy } from 'lib/seam/use-seam-query-result.js'
 
 export type UseNoiseThresholdsParams = NoiseSensorsNoiseThresholdsListParams
 
 export type UseNoiseThresholdsData = NoiseThreshold[]
 
 export function useNoiseThresholds(
   params: UseNoiseThresholdsParams
-): UseSeamQueryResult<'noiseThresholds', UseNoiseThresholdsData> {
+): UseSeamQueryResultLegacy<'noiseThresholds', UseNoiseThresholdsData> {
   const { client } = useSeamClient()
   const queryClient = useQueryClient()
 
diff --git a/src/lib/seam/use-seam-mutation.ts b/src/lib/seam/use-seam-mutation.ts
@@ -0,0 +1,50 @@
+import type {
+  SeamHttpApiError,
+  SeamHttpEndpointMutationPaths,
+  SeamHttpEndpoints,
+} from '@seamapi/http/connect'
+import {
+  useMutation,
+  type UseMutationOptions,
+  type UseMutationResult,
+} from '@tanstack/react-query'
+
+import { NullSeamClientError, useSeamClient } from 'lib/seam/use-seam-client.js'
+
+export type UseSeamMutationVariables<T extends SeamHttpEndpointMutationPaths> =
+  Parameters<SeamHttpEndpoints[T]>[0]
+
+export type UseSeamMutationResult<T extends SeamHttpEndpointMutationPaths> =
+  UseMutationResult<
+    MutationData<T>,
+    SeamHttpApiError,
+    UseSeamMutationVariables<T>
+  >
+
+export function useSeamMutation<T extends SeamHttpEndpointMutationPaths>(
+  endpointPath: T,
+  options: Parameters<SeamHttpEndpoints[T]>[1] &
+    MutationOptions<
+      MutationData<T>,
+      SeamHttpApiError,
+      UseSeamMutationVariables<T>
+    > = {}
+): UseSeamMutationResult<T> {
+  const { endpointClient: client } = useSeamClient()
+  return useMutation({
+    ...options,
+    mutationFn: async (variables) => {
+      if (client === null) throw new NullSeamClientError()
+      // 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) => Promise<any>
+      return await endpoint(variables, options)
+    },
+  })
+}
+
+type MutationData<T extends SeamHttpEndpointMutationPaths> = Awaited<
+  ReturnType<SeamHttpEndpoints[T]>
+>
+
+type MutationOptions<X, Y, Z> = Omit<UseMutationOptions<X, Y, Z>, 'mutationFn'>
diff --git a/src/lib/seam/use-seam-query-result.ts b/src/lib/seam/use-seam-query-result.ts
@@ -1,7 +1,9 @@
 import type { SeamHttpApiError } from '@seamapi/http/connect'
 import type { UseQueryResult } from '@tanstack/react-query'
 
-export type UseSeamQueryResult<Field extends string, ResponsePayload> = Omit<
-  UseQueryResult<ResponsePayload, SeamHttpApiError>,
-  'data'
-> & { [key in Field]?: ResponsePayload }
+export type UseSeamQueryResultLegacy<
+  Field extends string,
+  ResponsePayload,
+> = Omit<UseQueryResult<ResponsePayload, SeamHttpApiError>, 'data'> & {
+  [key in Field]?: ResponsePayload
+}
diff --git a/src/lib/seam/use-seam-query.ts b/src/lib/seam/use-seam-query.ts
