> ## Documentation Index
> Fetch the complete documentation index at: https://learn.nexudus.com/llms.txt
> Use this file to discover all available pages before exploring further.

# useTypedData

> Typed data fetching helper that pairs endpoint.type with a compile-time shape.

# 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

```ts theme={null}
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

```tsx theme={null}
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

```tsx theme={null}
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

* [useData](/developers/data/use-data) – Base hook with full config
* [createShape](/developers/data/create-shape) – Build type-safe field lists
* [useLocationByRouteContext](/developers/state/use-location-by-route-context) – To get the correct `httpClient`