Contoh

Pola penggunaan nyata untuk Tide v1.1.

Shorthand URL

Ganti boilerplate fetcher panjang dengan string url sederhana. Handler bawaan sudah termasuk credentials, abort, dan deteksi AuthError.

tsx

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

ETag / fetch kondisional

Aktifkan etag untuk mengirim header If-None-Match. Pada 304, Tide lewati update — tanpa bandwidth, tanpa re-render.

tsx

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

Deduplikasi konten

hashCompare menggunakan hashing djb2 untuk melewati update reaktif saat data identik — mencegah rekonsiliasi DOM yang tidak perlu.

tsx

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

Key reaktif (route dinamis)

Berikan fungsi getter untuk key dan url. Tide otomatis re-fetch saat salah satu berubah.

tsx

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

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

Fetch kondisional (enabled)

Gunakan enabled untuk menjeda semua aktivitas (fetch, poll, WS) sampai kondisi terpenuhi.

tsx

const [loggedIn, setLoggedIn] = createSignal(false)

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

Shorthand wsPath

Gunakan wsPath sebagai pengganti fungsi ws untuk ekstraksi dot-notation sederhana dari pesan WebSocket.

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>

Memulai Referensi API GitHub ↗