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

data-client-endpoint-setup

Wraps existing async functions with @data-client/endpoint for Data Client hooks integration.

2.0k|99|Updated Feb 15, 2019
Search Tags:#Supabase#endpoint#Firebase#Caching#typeScript#data-client#async functions
One-click install
npx skills add https://github.com/reactive/data-client --skill data-client-endpoint-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-client-endpoint-setup
Source: https://github.com/reactive/data-client/tree/main/.agents/skills/data-client-endpoint-setup
Command: npx skills add https://github.com/reactive/data-client --skill data-client-endpoint-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

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

What problem does it solve?

When your application fetches data through non-REST and non-GraphQL sources like Firebase, Supabase, WebSockets, or IndexedDB, you cannot use standard REST or GraphQL resource definitions. This Skill wraps those existing async functions with @data-client/endpoint so they work with Data Client hooks, caching, and normalization.

Core Features & Use Cases

  • Async Function Wrapping: Converts existing Promise-returning functions into Endpoint instances with schema-based normalization and named keys.
  • SDK Integration Patterns: Provides ready-made patterns for Firebase/Firestore, Supabase, IndexedDB, and WebSocket data fetching.
  • Cache and Mutation Configuration: Configures sideEffect flags, dataExpiryLength, pollFrequency, optimistic updates, and custom key functions.
  • Use Case: You have a Supabase-backed app with functions like fetchUser and fetchUsers. This Skill wraps them as Endpoints so you can call useSuspense(getUser, id) and ctrl.fetch(createUser, userData) with full caching and normalization.

Quick Start

Ask the AI to wrap your existing async data-fetching functions with @data-client/endpoint so they work with Data Client hooks.

Frequently Asked Questions about data-client-endpoint-setup

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

FAQPage Schema
How do I wrap an async function with @data-client/endpoint?▼

Pass your async function to the Endpoint constructor along with options like schema and name. For example, new Endpoint(fetchUser, { schema: User, name: 'getUser' }) creates an endpoint usable with useSuspense and controller fetch methods.

When should I use @data-client/endpoint instead of REST or GraphQL resources?▼

Use @data-client/endpoint when your data comes from sources that do not fit REST or GraphQL patterns, such as Firebase, Supabase, AWS SDK, WebSocket connections, or local async storage like IndexedDB and AsyncStorage.

Can I use Data Client endpoints with Firebase or Supabase?▼

Yes, wrap your Firebase or Supabase query functions in an Endpoint with an appropriate schema. The skill provides complete patterns for Firestore document fetches and Supabase table queries including error handling.

Why does my endpoint name break in production builds?▼

Production minification mangles function names, which Endpoint uses as default keys. Always pass an explicit name option like { name: 'getUser' } so the endpoint identity survives minification.

How do I handle mutations with @data-client/endpoint?▼

Set sideEffect: true in the Endpoint options for functions that modify data. This tells Data Client the endpoint is a mutation, and you can trigger it with ctrl.fetch(createUser, userData) from the controller.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

rdc-endpoint-setup

Wraps async functions in Endpoint for Data Client hooks.

Official
Advanced
involvexinvolvex

react-modernization

Upgrade React versions and migrate class components to hooks with codemods.

Community
Advanced
iii-hqiii-hq

iii-realtime-streaming

Stream real-time data via WebSocket and SSE endpoints with Redis state management.

Official
Intermediate
archibatearchibate
6

api-design-principles

Design REST and GraphQL API interfaces with versioning and error formats.

Community
Intermediate