Skip to main content

​
useTypedData

useTypedData<T, TShaped> builds on top of useData and the typed endpoint definitions found in src/api/endpoints.ts. It takes an endpoint object { url, type }, an optional createShape<TShaped>()([...]), and returns the shaped, typed resource. Source: src/api/fetchData.ts

​
Signature

function useTypedData<T, TShaped>(
  apiClient: HttpClient,
  endpoint?: { url: string | null; type: T } | null,
  shape?: { type: TShaped; fields: string[] },
  requestConfig?: {
    mockData?: any
    method?: 'get' | 'post' | 'put' | 'delete'
    data?: any
    queryConfig?: Partial<QueryObserverOptions<TShaped>>
    page?: number
    size?: number
  },
): ReturnType<typeof useData<TShaped>>
useTypedData simply calls useData<TShaped>(apiClient, endpoint?.url, { ...requestConfig, shape: shape?.fields }).

​
Pattern

  1. Pick an endpoint from src/api/endpoints.ts (these expose type with the expected response)
  2. Build a shape for the response using createShape<typeof endpoint.type>()([...])
  3. Call useTypedData(httpClient, endpoint, shape, { ...options })

​
Example – FAQ list

import endpoints from '@/api/endpoints'
import { useTypedData } from '@/api/fetchData'
import { createShape } from '@/helpers/shape-helper'
import { useLocationByRouteContext } from '@/states/useLocationByRouteContext'

export const useFaqData = (mockData?: any) => {
  const { httpClient } = useLocationByRouteContext()
  const endpoint = endpoints.faqs.list()
  const shape = createShape<typeof endpoint.type>()(['FaqArticles', 'OpenAiEnabled'])

  const { resource: data, isLoading, hasError } = useTypedData(httpClient, endpoint, shape, { mockData })

  return { data, isLoading, hasError }
}

​
Example – Teams list with paging

const endpoint = endpoints.teams.list(true)
const shape = createShape<typeof endpoint.type>()(['Records.Id', 'Records.Name'])
const { resource } = useTypedData(httpClient, endpoint, shape, { page: 1, size: 10 })

​
Notes

  • You can still pass method, data, and queryConfig – these flow through to useData.
  • mockData short-circuits fetching – great for the editor and tests.

​
See also