Examples

Real-world usage patterns for Tide v1.1.

URL shorthand

Replace verbose fetcher boilerplate with a simple url string. Built-in handler includes credentials, abort, and AuthError detection.

tsx

const gateways = createTide({
  key: 'gateways',
  url: '/api/gateways',
  wsPath: 'data.hermes.gateways',
})

ETag / conditional fetch

Enable etag to send If-None-Match headers. On 304, Tide skips the update — zero bandwidth, zero re-render.

tsx

const tooling = createTide({
  key: 'tooling',
  url: '/api/agentic/tooling',
  etag: true,
  pollInterval: 15000,
})

Content deduplication

hashCompare uses djb2 hashing to skip reactive updates when data is identical — prevents unnecessary DOM reconciliation.

tsx

const stack = createTide({
  key: 'stack',
  url: '/api/stack/status',
  hashCompare: true,
  pollInterval: 5000,
})

Reactive key (dynamic routes)

Pass a getter function for key and url. Tide re-fetches automatically when either changes.

tsx

const [query, setQuery] = createSignal('react')

const results = createTide({
  key: () => `search-${query()}`,
  url: () => `/api/search?q=${query()}`,
})

Conditional fetch (enabled)

Use enabled to pause all activity (fetch, poll, WS) until a condition is met.

tsx

const [loggedIn, setLoggedIn] = createSignal(false)

const data = createTide({
  key: 'private',
  url: '/api/private',
  enabled: () => loggedIn(),
})

wsPath shorthand

Use wsPath instead of a ws function for simple dot-notation extraction from WebSocket messages.

tsx

// Before (v1.0)
ws: (msg) => msg?.data?.stack ?? null

// After (v1.1)
wsPath: 'data.stack'

WS backoff + heartbeat

tsx

<TideProvider
  ws={{ url: 'wss://server/ws' }}
  reconnect={{ baseMs: 1000, maxMs: 30000 }}
  heartbeat={25000}
>
  <App />
</TideProvider>

Getting Started API Reference GitHub ↗