CODEWITHSUNDEEP
typescriptreact-admin
e-j5
e-j5

Reputation: 1859

react-admin dataProvider type extends

I am implementing custom dataProvider for react-admin. Because we have a number of data types, I thought of having separate resource providers to different files.

However, I'm getting typescript error on the transactionProvider implementation. enter image description here

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'.

Here is 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;

ResourceProvider interface

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

TransactionProvider implementation

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;

Upvotes: 3

Views: 1885

Answers (1)

e-j5
e-j5

Reputation: 1859

Posted question on Github https://github.com/marmelab/react-admin/issues/6739

I have updated ResourceProvider to return any type for now

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

Upvotes: 2

Related Questions