|
|
@@ -90,7 +90,7 @@
|
|
|
|
|
|
export const yourEntityClient = hc<YourEntityRoutes>('/api/v1', {
|
|
|
fetch: axiosFetch,
|
|
|
- }).your-entities;
|
|
|
+ }).api.v1['your-entities'];
|
|
|
```
|
|
|
|
|
|
6. **前端调用**
|
|
|
@@ -450,73 +450,21 @@
|
|
|
```typescript
|
|
|
import { hc } from 'hono/client';
|
|
|
import { YourEntityRoutes } from '@/server/api';
|
|
|
- import { axiosFetch } from '@/client/utils/fetch';
|
|
|
|
|
|
export const yourEntityClient = hc<YourEntityRoutes>('/api/v1', {
|
|
|
fetch: axiosFetch,
|
|
|
- }).your_entities; // 注意: 路由路径中的连字符会转为下划线
|
|
|
-
|
|
|
- // 类型提取
|
|
|
- import type { InferRequestType, InferResponseType } from 'hono/client';
|
|
|
-
|
|
|
- // 列表查询
|
|
|
- export type YourEntityListQuery = InferRequestType<typeof yourEntityClient.$get>['query'];
|
|
|
- export type YourEntityListResponse = InferResponseType<typeof yourEntityClient.$get, 200>;
|
|
|
-
|
|
|
- // 创建实体
|
|
|
- export type CreateYourEntityRequest = InferRequestType<typeof yourEntityClient.$post>['json'];
|
|
|
- export type CreateYourEntityResponse = InferResponseType<typeof yourEntityClient.$post, 200>;
|
|
|
-
|
|
|
- // 获取单个实体
|
|
|
- export type GetYourEntityParams = InferRequestType<typeof yourEntityClient[':id']['$get']>['param'];
|
|
|
- export type GetYourEntityResponse = InferResponseType<typeof yourEntityClient[':id']['$get'], 200>;
|
|
|
-
|
|
|
- // 更新实体
|
|
|
- export type UpdateYourEntityParams = InferRequestType<typeof yourEntityClient[':id']['$put']>['param'];
|
|
|
- export type UpdateYourEntityRequest = InferRequestType<typeof yourEntityClient[':id']['$put']>['json'];
|
|
|
- export type UpdateYourEntityResponse = InferResponseType<typeof yourEntityClient[':id']['$put'], 200>;
|
|
|
-
|
|
|
- // 删除实体
|
|
|
- export type DeleteYourEntityParams = InferRequestType<typeof yourEntityClient[':id']['$delete']>['param'];
|
|
|
- export type DeleteYourEntityResponse = InferResponseType<typeof yourEntityClient[':id']['$delete'], 200>;
|
|
|
+ }).api.v1['your-entities'];
|
|
|
```
|
|
|
|
|
|
-### 7. **前端调用示例**
|
|
|
- - 在页面组件中使用客户端API:
|
|
|
- ```typescript
|
|
|
- import { yourEntityClient, type YourEntityListResponse } from '@/client/api';
|
|
|
- import { useQuery, useMutation, useQueryClient } from 'react-query';
|
|
|
-
|
|
|
- // 获取列表数据
|
|
|
- const fetchEntities = async () => {
|
|
|
- const res = await yourEntityClient.$get({
|
|
|
- query: { page: 1, pageSize: 10, status: 1 }
|
|
|
- });
|
|
|
- if (!res.ok) {
|
|
|
- const error = await res.json();
|
|
|
- throw new Error(error.message || '获取数据失败');
|
|
|
- }
|
|
|
- return res.json() as Promise<YourEntityListResponse>;
|
|
|
- };
|
|
|
-
|
|
|
- // 使用React Query获取数据
|
|
|
- export function useEntitiesData() {
|
|
|
- return useQuery(['entities'], fetchEntities);
|
|
|
- }
|
|
|
-
|
|
|
- // 创建实体
|
|
|
- export function useCreateEntity() {
|
|
|
- const queryClient = useQueryClient();
|
|
|
- return useMutation(
|
|
|
- (data) => yourEntityClient.$post({ json: data }),
|
|
|
- {
|
|
|
- onSuccess: () => {
|
|
|
- queryClient.invalidateQueries(['entities']);
|
|
|
- }
|
|
|
- }
|
|
|
- );
|
|
|
- }
|
|
|
- ```
|
|
|
+### 7. **前端调用**
|
|
|
+ - 在页面组件(如`pages_users.tsx`)中:
|
|
|
+ - 使用`InferResponseType`提取响应类型
|
|
|
+ - 使用`InferRequestType`提取请求类型
|
|
|
+ - 示例:
|
|
|
+ ```typescript
|
|
|
+ type EntityResponse = InferResponseType<typeof entityClient.$get, 200>;
|
|
|
+ type CreateRequest = InferRequestType<typeof entityClient.$post>['json'];
|
|
|
+ ```
|
|
|
|
|
|
## 注意事项
|
|
|
|