メニュー
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.
Codex または Claude でインストール この Prompt をコピーして Codex、Claude、または他のアシスタントに貼り付けると、Skill ページを確認してインストールできます。
SOC 職業分類に基づく
Implement @data-client Managers for global/background side effects - websocket, SSE, polling, real-time updates, subscriptions, logging, analytics, middleware, intercepting Controller actions, DataProvider managers prop, redux-style action handling. Use when adding cross-cutting store behavior, reacting to dispatched actions, or handling external event streams.
Use @data-client/react hooks for data fetching, mutations, and rendering - useSuspense, useFetch, useQuery, useCache, useLive, useDLE, useSubscription, useController, DataProvider, AsyncBoundary, useLoading, useDebounce. Use when reading/rendering remote data, triggering mutations, doing optimistic updates, real-time subscriptions, or wiring Suspense/error boundaries in React.
Test @data-client/react with renderDataHook and mountDataClient - jest unit tests, fixtures, interceptors, MockResolver, mock responses, nock HTTP mocking, fake timers for polling/subscription tests, DataProvider test setup, hook and component testing. Use when writing or debugging tests for hooks, components, or resources built on @data-client/react.
Define REST APIs with @data-client/rest - resource(), RestEndpoint, CRUD (GET/POST/PUT/PATCH/DELETE), HTTP fetch, normalize, cache, urlPrefix, path-to-regexp parameters, searchParams, pagination, extend(), auth/headers, optimistic updates, polling, file download, blob, parseResponse. Use when defining or modifying network endpoints, REST resources, or the HTTP layer.
Model data with @data-client schemas (Entity, EntityMixin, Collection, Union, Query, Values, All, Invalidate, Lazy, Scalar) for atomic, consistent, referentially-equal async data via normalization, identity-based caching, and a single source of truth. Use when defining or editing pk, static schema, resource()/RestEndpoint schema, mutable lists/maps (push/unshift/assign/remove/move), polymorphic/discriminated types, memoized selectors / derived data, partial/supplementary entities, relational/nested/joined data, optimistic updates, or cache invalidation across @data-client/rest, /endpoint, /graphql, or /normalizr. Apply proactively when discussing data models, remote data shape, caching, normalization, identity, joins, polymorphism, mutable collections, or store consistency.
Test @data-client/vue composables and components - renderDataCompose, mountDataClient, fixtures, jest, nock HTTP mocking, polling/subscription tests with fake timers, useSuspense, useLive, useSubscription, Vue 3 reactive props. Use when writing or debugging tests for composables or components built on @data-client/vue.
| name | data-client-setup |
| description | 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. |
| disable-model-invocation | true |
Before installing, detect the project type and protocol by checking these files:
Check which lock file exists:
yarn.lock → use yarn addpnpm-lock.yaml → use pnpm addpackage-lock.json or bun.lockb → use npm install or bun addCheck 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 |
Scan the codebase to determine which data-fetching protocols are used:
Look for these patterns:
fetch() calls with REST-style URLs (/api/, /users/, etc.)axios, ky, got, superagent in package.jsonapi.ts, client.ts, services/*.ts/users/:id, /posts/:postId/commentsmethod: 'GET', method: 'POST', .get(, .post(Look for these patterns:
@apollo/client, graphql-request, urql, graphql-tag in package.json.graphql or .gql files in the projectquery {, mutation {, subscription {/graphqlFor async operations that don't match REST or GraphQL:
| Framework | Core Package |
|---|---|
| React (all) | @data-client/react + dev: @data-client/test |
| Vue | @data-client/vue (testing included) |
React (NextJS, Expo, React Native, plain React):
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:
npm install @data-client/vue
yarn add @data-client/vue
pnpm add @data-client/vue
After installing, add the provider at the top-level component.
Edit app/layout.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.
Edit app/_layout.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>
);
}
Edit entry file (e.g., index.tsx):
import { DataProvider } from '@data-client/react';
import { AppRegistry } from 'react-native';
const Root = () => (
<DataProvider>
<App />
</DataProvider>
);
AppRegistry.registerComponent('MyApp', () => Root);
Edit entry file (e.g., index.tsx, main.tsx, or src/index.tsx):
import { DataProvider } from '@data-client/react';
import ReactDOM from 'react-dom/client';
ReactDOM.createRoot(document.getElementById('root')!).render(
<DataProvider>
<App />
</DataProvider>,
);
Edit main.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');
After provider setup, apply the appropriate skill based on detected protocol:
Apply skill "data-client-rest-setup" which will:
@data-client/restBaseEndpoint class extending RestEndpointApply skill "data-client-graphql-setup" which will:
@data-client/graphqlGQLEndpoint instanceApply skill "data-client-endpoint-setup" which will:
@data-client/endpointnew Endpoint()If multiple protocols are detected, apply multiple setup skills. Each protocol package can be installed alongside others.
After setup, verify:
package.json@data-client/react/nextjs for NextJS)❌ Wrong:
import { DataProvider } from '@data-client/react';
✅ Correct for NextJS:
import { DataProvider } from '@data-client/react/nextjs';
The DataProvider must wrap all components that use data-client hooks. Place it at the topmost level possible.
After core setup and protocol-specific setup:
Entity - see skill "data-client-schema"useSuspense, useQuery, useController - see skill "data-client-react" or "data-client-vue"For detailed API documentation, see the references directory: