UI API — Resource

apiClient.ui.resource manages API resources — named datasource definitions that link UI components to backend data models.

Resources are cached using a TTL-based persistent cache backed by IndexedDB (default TTL: 1 hour). Cache entries can survive page reloads — subsequent fetches within the TTL window return cached data without hitting the network.

Methods

create

Create a new resource.

const resource = await apiClient.ui.resource.create({
  resource: {
    name: 'Jobs',
    resource: 'jobs',
    datasource: 'SKEDULO',
    // additional fields...
  },
})
console.log(resource.uid)

get

Fetch a single resource by UID.

const resource = await apiClient.ui.resource.get({ uid: 'abc123' })

getMany

Fetch multiple resources, with optional filters. Results are cached.

// All resources
const resources = await apiClient.ui.resource.getMany({})

// Filter by resource name
const matching = await apiClient.ui.resource.getMany({ resource: 'jobs' })

// By display name
const named = await apiClient.ui.resource.getMany({ name: 'Jobs' })

// Paginated
const page = await apiClient.ui.resource.getMany({ limit: 20, page: 1 })

put

Update an existing resource. Uses merge-and-put — only include the fields you want to change.

await apiClient.ui.resource.put({
  resource: { uid: 'abc123', name: 'Updated Resource Name' },
})

del

Delete a resource by UID.

await apiClient.ui.resource.del({ uid: 'abc123' })

getByName

Find the best-matching resource by display name. Returns null if none found.

If no match is found the cache for that request is invalidated so subsequent calls hit the API.

const resource = await apiClient.ui.resource.getByName('Jobs')
if (resource) {
  console.log(resource.uid)
}

Resource Type

A resource object contains the following key fields:

React Example

import { useApiClient } from '@skedulo/horizon-core'
import { useEffect, useState } from 'react'

const ResourcePicker = ({ onSelect }) => {
  const apiClient = useApiClient()
  const [resources, setResources] = useState([])

  useEffect(() => {
    apiClient?.ui.resource.getMany({}).then(setResources)
  }, [apiClient])

  return (
    <select onChange={(e) => onSelect(e.target.value)}>
      {resources.map((r) => (
        <option key={r.uid} value={r.uid}>
          {r.name}
        </option>
      ))}
    </select>
  )
}