skills.rest
reactive
reactiveOFFICIAL
Explore all skills by this author →
Website𝕏@dataclientioGitHub

data-client-manager

Implement @data-client Managers for global side effects like websockets, polling, and offline persistence.

2.0k|99|Updated Feb 15, 2019
Search Tags:#websocket#redux#managers#data-client#reAct#offline persistence#Middleware
One-click install
npx skills add https://github.com/reactive/data-client --skill data-client-manager
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-client-manager
Source: https://github.com/reactive/data-client/tree/main/.agents/skills/data-client-manager
Command: npx skills add https://github.com/reactive/data-client --skill data-client-manager

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @data-client/core, @data-client/react, and includes references (resource) components.

What problem does it solve?

Handling cross-cutting concerns in a @data-client application—such as websocket streams, polling, logging, analytics, error reporting, and offline persistence—requires redux-style middleware that reacts to dispatched actions, which is complex to implement correctly from scratch.

Core Features & Use Cases

  • Middleware Patterns: Provides working examples for logging, Sentry error reporting, fetch timing metrics, and toast notifications keyed off action types like SET_RESPONSE and FETCH.
  • Real-Time & Sync: Covers websocket/SSE push streams, polling intervals, cross-tab sync via BroadcastChannel, and refetch on window focus or network reconnect.
  • Persistence & Auth: Demonstrates IndexedDB offline persistence with state restore, and logout handling on 401 via controller.resetEntireStore().
  • Use Case: Add a Manager that listens to SUBSCRIBE/UNSUBSCRIBE actions and routes them to a custom websocket transport, consuming the actions so other managers skip them.

Quick Start

Ask the AI to implement a @data-client Manager that refetches all data when the browser window regains focus.

Frequently Asked Questions about data-client-manager

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I implement a @data-client Manager for websocket updates?▼

Create a class implementing the Manager interface with a middleware property. Connect the websocket in init or middleware setup, call controller.set() on incoming messages, and close the connection in cleanup().

How to add polling or interval-based updates in @data-client?▼

Use setInterval inside the Manager middleware to periodically call controller.set() or controller.fetch() with updated data. Clear the interval in the cleanup() method to avoid leaks.

Can @data-client Managers persist state offline with IndexedDB?▼

Yes, debounce writes of controller.getState() to IndexedDB, dropping the optimistic key since it is not cloneable. Restore state via the DataProvider initialState prop; avoid localStorage because it blocks the main thread.

How do I register custom Managers with DataProvider?▼

Pass an array combining getDefaultManagers() with your custom Manager instances to the managers prop of DataProvider. Each Manager's middleware then participates in the redux-style action pipeline.

Why must actions be passed to next() in @data-client middleware?▼

Actions must be explicitly passed to next(action) so subsequent managers in the chain can process them. Returning without calling next consumes the action, which is only appropriate for custom subscription handling.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

rdc-rest

Define type-safe REST APIs with schema-driven normalization and caching.

Official
Advanced
futureteafuturetea

SWR Data Fetching

Fetch API data in React with caching, revalidation, and optimistic updates.

Community
Intermediate
aurumorincaurumorinc

sentry

Configure Sentry error tracking and observability for Python applications.

Official
Intermediate
mgd34msumgd34msu
4

zustand

Manage React application state with Zustand stores, selectors, actions, and middleware.

Community
Intermediate