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

data-client-setup

Installs and configures Reactive Data Client providers for React, NextJS, Expo, React Native, and Vue projects.

2.0k|99|Updated Feb 15, 2019
Search Tags:#NextJS#Vue#Data Fetching#reAct#Setup#Provider#reactive data client
One-click install
npx skills add https://github.com/reactive/data-client --skill data-client-setup
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: data-client-setup
Source: https://github.com/reactive/data-client/tree/main/.agents/skills/data-client-setup
Command: npx skills add https://github.com/reactive/data-client --skill data-client-setup

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Setting up Reactive Data Client requires choosing the correct package, import path, and provider placement for each framework, and mistakes like using the wrong NextJS import or a misplaced provider cause subtle runtime failures. This Skill automates detection of the project type, package manager, and data protocol, then performs the correct installation and provider wiring.

Core Features & Use Cases

  • Automatic Project Detection: Inspects package.json and lock files to identify NextJS, Expo, React Native, Vue, or plain React, plus the package manager (npm, yarn, pnpm, bun).
  • Protocol Detection: Scans the codebase for REST, GraphQL, or custom async patterns and hands off to the matching protocol-specific setup skill.
  • Provider Configuration: Generates the correct DataProvider or DataClientPlugin setup for each framework, including the special @data-client/react/nextjs import path.
  • Use Case: You have an existing NextJS app using axios for REST calls. This Skill detects NextJS and REST, installs @data-client/react, adds DataProvider to app/layout.tsx with the correct import, and delegates REST endpoint configuration to the REST setup skill.

Quick Start

Set up Reactive Data Client in my project by detecting the framework and data protocol, then install the packages and configure the root provider.

Frequently Asked Questions about data-client-setup

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

FAQPage Schema
How do I set up Reactive Data Client in a NextJS app?▼

Install @data-client/react and add DataProvider from @data-client/react/nextjs to app/layout.tsx wrapping the body element. NextJS requires the /nextjs import path rather than the base @data-client/react import.

How do I add Reactive Data Client to a Vue project?▼

Install @data-client/vue and register DataClientPlugin in main.ts with app.use(). The plugin accepts optional overrides for managers, initialState, Controller, and gcPolicy.

Does Reactive Data Client work with Expo and React Native?▼

Yes, Expo and React Native use the standard @data-client/react package with DataProvider. In Expo wrap the Stack in app/_layout.tsx; in React Native wrap the root component registered with AppRegistry.

Why does DataProvider fail in my NextJS app?▼

The most common cause is importing DataProvider from @data-client/react instead of @data-client/react/nextjs. Also verify the provider sits at the root layout and no duplicate providers exist in the component tree.

Can Reactive Data Client handle both REST and GraphQL in one project?▼

Yes, multiple protocols are supported by installing @data-client/rest and @data-client/graphql alongside each other. Each protocol has its own setup skill that configures endpoints and authentication independently.

Related Skills

Explore More Software Engineering Skills→
reactivereactive
2.0k

rdc-setup

Detect project type and protocol, then install Reactive Data Client dependencies.

Official
Intermediate
reactivereactive
2.0k

rdc-react

Expose React hooks for data fetching, caching, and live updates.

Official
Intermediate
librefanglibrefang
10

api-tester

Automate API testing and validation for REST and GraphQL services.

Official
Intermediate
jcsoftdevjcsoftdev

react-data-fetching

Coordinate React data fetching with TanStack Query or SWR for caching and deduplication.

Community
Advanced