SuperAPI AI 工具集

data-client-setup

数据与分析

查看项目

更新于 10-16 02:31

技能介绍

用途:在项目中安装并初始化 Reactive Data Client,根据项目类型与数据协议完成核心包安装和根级 Provider/Plugin 接入。

主要能力:安装前自动检测包管理器(依据 yarn.lock、pnpm-lock.yaml、package-lock.json 或 bun.lockb 选择 yarn add、pnpm add、npm install 或 bun add);检测项目类型(package.json 中 next、expo、vue、react-native、react 依赖);扫描代码判断协议类型,REST 关注 fetch、axios/ky/got/superagent、api.ts 等文件与 HTTP 方法,GraphQL 关注 @apollo/client、graphql-request、urql、.graphql/.gql 文件与 gql 标签,自定义协议关注返回 Promise 的异步函数、第三方 SDK 与 IndexedDB。

安装:React 系安装 @data-client/react,开发依赖 @data-client/test;Vue 安装 @data-client/vue(含测试)。命令示例:npm install @data-client/react && npm install -D @data-client/test;yarn add @data-client/vue。

接入:在顶层组件加入 Provider。NextJS App Router 使用 @data-client/react/nextjs 的 DataProvider;Expo、React Native、普通 React 使用 @data-client/react 的 DataProvider;Vue 在 main.ts 中 app.use(DataClientPlugin, {...})。

协议后续:REST 应用 data-client-rest-setup,GraphQL 应用 data-client-graphql-setup,自定义异步应用 data-client-endpoint-setup;多协议可并行安装。

限制与注意:NextJS 必须使用 @data-client/react/nextjs 导入路径;Provider 需置于最顶层且避免重复;完成后需核对包安装、Provider 包裹、导入路径与协议配置。后续可参考 data-client-schema、data-client-react/vue、data-client-rest 等技能。具体 API 细节以官方 references 为准。