在react-admin中使用typescript验证源参数

import * as React from 'react';
import { List, Datagrid, TextField, EmailField } from 'react-admin';
import { useQuery } from 'react-query';
import { User } from './types'; // 假设我们有一个User类型定义

// 定义API参数的类型
interface UserListParams {
    page?: number;
    perPage?: number;
    sort?: string;
    filter?: string;
}

// 自定义查询函数
const fetchUsers = async (params: UserListParams): Promise<User[]> => {
    const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
    if (!response.ok) {
        throw new Error('Network response was not ok');
    }
    return response.json();
};

// 用户列表组件
const UserList: React.FC = () => {
    const { data, isLoading, error } = useQuery<User[], Error, UserListParams>(
        ['users', { page: 1, perPage: 10 }],
        fetchUsers
    );

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <List>
            <Datagrid>
                <TextField source="id" />
                <TextField source="name" />
                <EmailField source="email" />
            </Datagrid>
        </List>
    );
};

export default UserList;

interface ApiResponse {
    users: User[];
    // 其他可能的字段
}

const fetchUsers = async (params: UserListParams): Promise<User[]> => {
    const response = await fetch(`/api/users?${new URLSearchParams(params)}`);
    const data: ApiResponse = await response.json();
    return data.users;
};