data-client-setup

Install and set up @data-client/react or @data-client/vue in a project. Detects project type (NextJS, Expo, React Native, Vue, plain React) and protocol (REST, GraphQL, custom), then hands off to protocol-specific setup skills.

16 stars

bydiegosouzapw

View on GitHub Installation ↓

Best use case

data-client-setup is best used when you need a repeatable AI agent workflow instead of a one-off prompt.

Teams using data-client-setup should expect a more consistent output, faster repeated execution, less prompt rewriting.

When to use this skill

You want a reusable workflow that can be run more than once with consistent structure.

When not to use this skill

You only need a quick one-off answer and do not need a reusable workflow.
You cannot install or maintain the underlying files, dependencies, or repository context.

Installation

Claude Code / Cursor / Codex

$curl -o ~/.claude/skills/data-client-setup/SKILL.md --create-dirs "https://raw.githubusercontent.com/diegosouzapw/awesome-omni-skill/main/skills/development/data-client-setup/SKILL.md"

Manual Installation

Download SKILL.md from GitHub
Place it in .claude/skills/data-client-setup/SKILL.md inside your project
Restart your AI agent — it will auto-discover the skill

How data-client-setup Compares

Feature / Agent	data-client-setup	Standard Approach
Platform Support	Not specified	Limited / Varies
Context Awareness	High	Baseline
Installation Complexity	Unknown	N/A

Frequently Asked Questions

What does this skill do?

Where can I find the source code?

You can find the source code on GitHub using the link provided at the top of the page.

SKILL.md Source

# Setup Reactive Data Client

## Detection Steps

Before installing, detect the project type and protocol by checking these files:

### 1. Detect Package Manager

Check which lock file exists:
- `yarn.lock` → use `yarn add`
- `pnpm-lock.yaml` → use `pnpm add`
- `package-lock.json` or `bun.lockb` → use `npm install` or `bun add`

### 2. Detect Project Type

Check `package.json` dependencies:

| Check | Project Type |
|-------|--------------|
| `"next"` in dependencies | **NextJS** |
| `"expo"` in dependencies | **Expo** |
| `"vue"` in dependencies | **Vue** |
| `"react-native"` in dependencies (no expo) | **React Native** |
| `"react"` in dependencies | **Plain React** |

### 3. Detect Protocol Type

Scan the codebase to determine which data-fetching protocols are used:

#### REST Detection

Look for these patterns:
- `fetch()` calls with REST-style URLs (`/api/`, `/users/`, etc.)
- HTTP client libraries: `axios`, `ky`, `got`, `superagent` in `package.json`
- Files with REST patterns: `api.ts`, `client.ts`, `services/*.ts`
- URL patterns with path parameters: `/users/:id`, `/posts/:postId/comments`
- HTTP methods in code: `method: 'GET'`, `method: 'POST'`, `.get(`, `.post(`

#### GraphQL Detection

Look for these patterns:
- `@apollo/client`, `graphql-request`, `urql`, `graphql-tag` in `package.json`
- `.graphql` or `.gql` files in the project
- `gql\`` template literal tags
- GraphQL query patterns: `query {`, `mutation {`, `subscription {`
- GraphQL endpoint URLs: `/graphql`

#### Custom Protocol Detection

For async operations that don't match REST or GraphQL:
- Custom async functions returning Promises
- Third-party SDK clients (Firebase, Supabase, AWS SDK, etc.)
- IndexedDB or other local async storage

## Installation

### Core Packages

| Framework | Core Package |
|-----------|----------|
| React (all) | `@data-client/react` + dev: `@data-client/test` |
| Vue | `@data-client/vue` (testing included) |

### Install Command Examples

**React (NextJS, Expo, React Native, plain React):**
```bash
npm install @data-client/react && npm install -D @data-client/test
yarn add @data-client/react && yarn add -D @data-client/test
pnpm add @data-client/react && pnpm add -D @data-client/test
```

**Vue:**
```bash
npm install @data-client/vue
yarn add @data-client/vue
pnpm add @data-client/vue
```

## Provider Setup

After installing, add the provider at the top-level component.

### NextJS (App Router)

Edit `app/layout.tsx`:

```tsx
import { DataProvider } from '@data-client/react/nextjs';

export default function RootLayout({ children }) {
  return (
    <html>
      <DataProvider>
        <body>
          {children}
        </body>
      </DataProvider>
    </html>
  );
}
```

**Important**: NextJS uses `@data-client/react/nextjs` import path.

### Expo

Edit `app/_layout.tsx`:

```tsx
import { Stack } from 'expo-router';
import { DataProvider } from '@data-client/react';

export default function RootLayout() {
  return (
    <DataProvider>
      <Stack>
        <Stack.Screen name="index" />
      </Stack>
    </DataProvider>
  );
}
```

### React Native

Edit entry file (e.g., `index.tsx`):

```tsx
import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';

const Root = () => (
  <DataProvider>
    <App />
  </DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
```

### Plain React (Vite, CRA, etc.)

Edit entry file (e.g., `index.tsx`, `main.tsx`, or `src/index.tsx`):

```tsx
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom/client';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <DataProvider>
    <App />
  </DataProvider>,
);
```

### Vue

Edit `main.ts`:

```ts
import { createApp } from 'vue';
import { DataClientPlugin } from '@data-client/vue';
import App from './App.vue';

const app = createApp(App);

app.use(DataClientPlugin, {
  // optional overrides
  // managers: getDefaultManagers(),
  // initialState,
  // Controller,
  // gcPolicy,
});

app.mount('#app');
```

## Protocol-Specific Setup

After provider setup, apply the appropriate skill based on detected protocol:

### REST APIs

Apply skill **"data-client-rest-setup"** which will:
1. Install `@data-client/rest`
2. Offer to create a custom `BaseEndpoint` class extending `RestEndpoint`
3. Configure common behaviors: urlPrefix, authentication, error handling

### GraphQL APIs

Apply skill **"data-client-graphql-setup"** which will:
1. Install `@data-client/graphql`
2. Create and configure `GQLEndpoint` instance
3. Set up authentication headers

### Custom Async Operations

Apply skill **"data-client-endpoint-setup"** which will:
1. Install `@data-client/endpoint`
2. Offer to wrap existing async functions with `new Endpoint()`
3. Configure schemas and caching options

### Multiple Protocols

If multiple protocols are detected, apply multiple setup skills. Each protocol package can be installed alongside others.

## Verification Checklist

After setup, verify:

- [ ] Core packages installed in `package.json`
- [ ] Provider/Plugin wraps the app at root level
- [ ] Correct import path used (especially `@data-client/react/nextjs` for NextJS)
- [ ] No duplicate providers in component tree
- [ ] Protocol-specific setup completed via appropriate skill

## Common Issues

### NextJS: Wrong Import Path

❌ Wrong:
```tsx
import { DataProvider } from '@data-client/react';
```

✅ Correct for NextJS:
```tsx
import { DataProvider } from '@data-client/react/nextjs';
```

### Provider Not at Root

The `DataProvider` must wrap all components that use data-client hooks. Place it at the topmost level possible.

## Next Steps

After core setup and protocol-specific setup:
1. Define data schemas using `Entity` - see skill "data-client-schema"
2. Use hooks like `useSuspense`, `useQuery`, `useController` - see skill "data-client-react" or "data-client-vue"
3. Define REST resources - see skill "data-client-rest"

## References

For detailed API documentation, see the [references](references/) directory:

- [DataProvider](references/DataProvider.md) - Root provider component
- [installation](references/installation.md) - Installation guide
- [getDefaultManagers](references/getDefaultManagers.md) - Default managers

Related Skills

database-optimizer

from diegosouzapw/awesome-omni-skill

Expert database optimizer specializing in modern performance tuning, query optimization, and scalable architectures. Masters advanced indexing, N+1 resolution, multi-tier caching, partitioning strategies, and cloud database optimization. Handles complex query analysis, migration strategies, and performance monitoring. Use PROACTIVELY for database optimization, performance issues, or scalability challenges.

database-optimization

from diegosouzapw/awesome-omni-skill

Use when optimizing database queries, indexes, N+1 problems, slow queries, or analyzing query performance. Triggers on keywords like "slow query", "N+1", "index", "query optimization", "database performance", "eager loading".

database

from diegosouzapw/awesome-omni-skill

Database design, optimization, and management for SQL and NoSQL databases. Covers schema design, indexing, query optimization, migrations, and database best practices. Use when designing database schemas, optimizing queries, troubleshooting database performance, or implementing data models.

database-migrator

from diegosouzapw/awesome-omni-skill

Handle schema changes and data migrations safely. Creates migration files with rollback plans. Use when user says 'migration', 'schema change', 'add column', 'database change', or 'alter table'.

database-migrations-sql-migrations

from diegosouzapw/awesome-omni-skill

SQL database migrations with zero-downtime strategies for PostgreSQL, MySQL, SQL Server Use when: the user asks to run the `sql-migrations` workflow and the task requires multi-step orchestration. Do not use when: the task is small, single-step, and can be completed directly without orchestration overhead.

database-migration

from diegosouzapw/awesome-omni-skill

Guides database migration projects including engine changes (MySQL to PostgreSQL, Oracle to PostgreSQL, SQL Server to PostgreSQL), version upgrades, cloud migrations (on-premise to RDS/Cloud SQL/Azure Database), schema migrations, zero-downtime migrations, replication setup, and data migration strategies. Covers homogeneous and heterogeneous migrations, ETL processes, cutover procedures, and rollback plans. Use when migrating databases, changing database engines, upgrading database versions, moving databases to cloud, or when users mention "database migration", "DB migration", "PostgreSQL migration", "MySQL to Postgres", "Oracle migration", "database upgrade", or "cloud database migration".

database-master

from diegosouzapw/awesome-omni-skill

World-class expert database master covering PostgreSQL, MySQL, MongoDB, Redis, and database architecture. Use when designing schemas, optimizing queries, planning migrations, implementing caching strategies, or solving complex database challenges at production scale.

database-management

from diegosouzapw/awesome-omni-skill

Database schema design, migrations, query optimization, and ORM best practices. Use for database setup, performance tuning, and data modeling.

database-expert

from diegosouzapw/awesome-omni-skill

Advanced database design and administration for PostgreSQL, MongoDB, and Redis. Use when designing schemas, optimizing queries, managing database performance, or implementing data patterns.

database-expert-advisor

from diegosouzapw/awesome-omni-skill

Database design, optimization, and operations expert

database-engine-implementation

from diegosouzapw/awesome-omni-skill

Guide for implementing database engines in IterableData. Use when adding support for new SQL or NoSQL databases, implementing DBDriver classes, or extending database capabilities.

database-designer

from diegosouzapw/awesome-omni-skill

Provides expert-level database design with schema analysis, index optimization, and migration generation. Supports PostgreSQL, MySQL, MongoDB, and DynamoDB. Use when designing schemas, optimizing queries, planning migrations, or analyzing database performance.