Pesquisa de site

typescript - tipo dataProvider do react-admin estende


Estou implementando um dataProvider personalizado para o react-admin. Como temos vários tipos de dados, pensei em ter provedores de recursos separados para arquivos diferentes.

No entanto, estou recebendo um erro de TypeScript na implementação do transactionProvider.

Type '(params: GetListParams) => Promise<{ data: Transaction[]; total: number; }>' is not assignable to type '<RecordType extends Record = Record>(params: GetListParams) => Promise<GetListResult<RecordType>>'.
  Type 'Promise<{ data: Transaction[]; total: number; }>' is not assignable to type 'Promise<GetListResult<RecordType>>'.
    Type '{ data: Transaction[]; total: number; }' is not assignable to type 'GetListResult<RecordType>'.
      Types of property 'data' are incompatible.
        Type 'Transaction[]' is not assignable to type 'RecordType[]'.
          Type 'Transaction' is not assignable to type 'RecordType'.
            'Transaction' is assignable to the constraint of type 'RecordType', but 'RecordType' could be instantiated with a different subtype of constraint 'Record'.

Aqui está dataProvider.ts


import { ResouceProvider } from './resourceProvider';
import transactionProvider from './transactionProvider';

const providers: { [key: string]: ResouceProvider } = {
  transactions: transactionProvider,
};

const dataProvider: DataProvider = {
  getList: (resource: string, params: GetListParams) => {
    return providers[resource].getList(params);
  },

 ...
};

export default dataProvider;

Interface ResourceProvider

export type ResouceProvider = {
  getList: <RecordType extends Record = Record>(
    params: GetListParams
  ) => Promise<GetListResult<RecordType>>;
...
};


Implementação do TransactionProvider

import { Transaction } from 'types';
import { ResouceProvider } from './resourceProvider';

const transactionProvider: ResouceProvider = {
  getList: async (params: GetListParams) => {
    const { start, end } = params.filter;
    const res = await fetchTransactions(start, end);
    const result = [];
    for (let item of res.data.data) {
      const transaction: Transaction = item.data;
      transaction.id = item.id;
      result.push(transaction);
    }

    return { data: result, total: result.length };
  },
...
};

export default transactionProvider;

Resposta #1

Pergunta postada no Github https://github.com/marmelab/react-admin/issues/6739

Atualizei ResourceProvider para retornar qualquer tipo por enquanto

export type ResouceProvider = {
  getList: (params: GetListParams) => Promise<GetListResult<any>>;

Artigos relacionados