CachePuppy
JavaScriptReact (@cachepuppy/react)

Hooks

useTopic, usePresence, useTopicState, workflow hooks, and useCachePuppyClient patterns.

All hooks assume a surrounding CachePuppyProvider.

useCachePuppyClient

Returns { client, state, error, connect, disconnect, destroy } — the same object as useCachePuppyContext.

useTopic(topic, options?)

Subscribes when enabled (default true) and the client state is connected.

const { error } = useTopic("orders", {
  onMessage: (message) => {
    console.log(message);
  },
});

Cleanup unsubscribes automatically on dependency changes or unmount.

usePresence(topic, enabled?)

Tracks clientCount for a topic by combining an initial clientCount() RPC with onPresenceChange updates.

useTopicState(topic, enabled?)

Loads topic state when connected, listens for state_updated, and exposes imperative helpers:

  • setState(next) — wraps client.setTopicState.
  • refresh() — wraps client.getTopicState.
  • clear() — wraps client.clearTopicState.

useWorkflowEvents(workflowId, options?)

Subscribes to the workflow topic (workflow:<workflowId>) while connected and emits every event from client.subscribeWorkflow(...).

const { error } = useWorkflowEvents("wf_123", {
  onEvent: (event) => {
    console.log(event.event, event.payload);
  },
});

useWorkflowStatus(workflowId, options?)

Filters workflow topic events to workflow_status using client.onWorkflowStatus(...) and returns:

  • status — latest status string or null.
  • latest — latest full { workflowId, status } payload.
  • error — subscription setup error if any.

Server Components

These hooks are client hooks. Keep them in client components or files marked with "use client" at the module top when using the Next.js App Router.

On this page