React hooks

The @glacier/react package wraps the core SDK in a provider and a handful of hooks, so components can read warmed data without thinking about the cache.

Setup

Wrap your app once with the provider:

import { GlacierProvider } from '@glacier/react'
import { glacier } from './glacier.config'

export default function App({ children }) {
  return <GlacierProvider client={glacier}>{children}</GlacierProvider>
}

useGlacierQuery

Read data that Glacier keeps warm. If the entry is already cached the value is returned synchronously; otherwise Glacier fetches and caches it.

import { useGlacierQuery } from '@glacier/react'

function Profile({ id }) {
  const { data, isWarm } = useGlacierQuery(`user:${id}`, () => api.getUser(id))
  if (!data) return <Spinner />
  return <Name value={data.name} fresh={isWarm} />
}

isWarm tells you whether the value came from a prediction (instant) or a live fetch — handy for subtle UI cues.

usePrefetch

Warm data ahead of a navigation, for example on hover or focus:

import { usePrefetch } from '@glacier/react'

function UserRow({ id }) {
  const prefetch = usePrefetch()
  return <a onMouseEnter={() => prefetch(`user:${id}`)} href={`/users/${id}`}>Open</a>
}

Next: Framework adapters for Next.js, Remix, and more.