Dumb dataProvider doesn't type check

What you were expecting: Bootstrap a dummy application with create-react-app with typescript, and implement a dummy dataProvider. It should compile just fine.

What happened instead: Big Typescript error :

Type '{ getList: (resource: string, params: any) => Promise<{ data: { id: number; toto: string; }[]; total: number; }>; getOne: (resource: string, params: any) => Promise<{ data: { id: number; toto: string; }; }>; ... 6 more ...; deleteMany: (resource: string, params: any) => Promise<...>; }' is not assignable to type 'DataProvider | LegacyDataProvider'.
  Type '{ getList: (resource: string, params: any) => Promise<{ data: { id: number; toto: string; }[]; total: number; }>; getOne: (resource: string, params: any) => Promise<{ data: { id: number; toto: string; }; }>; ... 6 more ...; deleteMany: (resource: string, params: any) => Promise<...>; }' is not assignable to type 'DataProvider'.
    The types returned by 'getList(...)' are incompatible between these types.
      Type 'Promise<{ data: { id: number; toto: string; }[]; total: number; }>' is not assignable to type 'Promise<GetListResult<RecordType>>'.
        Type '{ data: { id: number; toto: string; }[]; total: number; }' is not assignable to type 'GetListResult<RecordType>'.
          Types of property 'data' are incompatible.
            Type '{ id: number; toto: string; }[]' is not assignable to type 'RecordType[]'.
              Type '{ id: number; toto: string; }' is not assignable to type 'RecordType'.
                '{ id: number; toto: string; }' is assignable to the constraint of type 'RecordType', but 'RecordType' could be instantiated with a different subtype of constraint 'Record'.  TS2322

    65 | const App: React.FC = () => {
    66 |     return (
  > 67 |         <Admin loginPage={LoginPage} dataProvider={dataProvider}/>
       |                                      ^
    68 |     );
    69 | };
    70 |

Steps to reproduce:

1. npx create-react-app my-app --template typescript
2. cd my_app
3. npm install react-admin
4. npm start

Related code: In App.tsx:

import React from 'react';
import {Admin} from "react-admin";

const dataProvider = {
  getList: (resource: string, params: any) => Promise.resolve({data: [{id: 1, toto: "tata"},{id: 2, toto: "tata"}], total: 0}),
  getOne: (resource: string, params: any) => Promise.resolve({data: {id: 1, toto: "tata"}}),
  getMany: (resource: string, params: any) => Promise.resolve({data: [{id: 1, toto: "tata"}]}),
  getManyReference: (resource: string, params: any) => Promise.resolve({data: [{id: 1, toto: "tata"}]}),
  create: (resource: string, params: any) => Promise.resolve({data: {id: 1, toto: "tata"}}),
  update: (resource: string, params: any) => Promise.resolve({data: {id: 1, toto: "tata"}}),
  updateMany: (resource: string, params: any) => Promise.resolve({data: [1]}),
  delete: (resource: string, params: any) => Promise.resolve({data: {id: 1, toto: "tata"}}),
  deleteMany: (resource: string, params: any) => Promise.resolve({data: [1]}),
};

function App() {
  return (
      <Admin dataProvider={dataProvider}/>
  );
}

export default App;

Other information:

Environment

• React-admin version: 3.9.6
• Last version that did not exhibit the issue (if applicable):
• React version: ^17.0.1
• Browser: Chrome

[coldshine]

Had the similar issue on 4.0.2 with getOne:

src/components/App.tsx:13:47 - error TS2322: Type '{ create: (resource: any, { data: formData }: CreateParams) => Promise<{ data: any; }>; delete: (resource: any, { id }: DeleteParams) => Promise<DeleteResult>; deleteMany: () => Promise<DeleteManyResult>; getList: (resource: any, params: GetListParams) => Promise<{ data: any[]; total: number; }>; ... 4 more ...; upd...' is not assignable to type 'DataProvider<string> | LegacyDataProvider'.
  Type '{ create: (resource: any, { data: formData }: CreateParams) => Promise<{ data: any; }>; delete: (resource: any, { id }: DeleteParams) => Promise<DeleteResult>; deleteMany: () => Promise<DeleteManyResult>; getList: (resource: any, params: GetListParams) => Promise<{ data: any[]; total: number; }>; ... 4 more ...; upd...' is not assignable to type 'DataProvider<string>'.
    The types returned by 'getOne(...)' are incompatible between these types.
      Type 'Promise<{ data: { id: any; }; }>' is not assignable to type 'Promise<GetOneResult<RecordType>>'.
        Type '{ data: { id: any; }; }' is not assignable to type 'GetOneResult<RecordType>'.
          Types of property 'data' are incompatible.
            Type '{ id: any; }' is not assignable to type 'RecordType'.
              '{ id: any; }' is assignable to the constraint of type 'RecordType', but 'RecordType' could be instantiated with a different subtype of constraint 'RaRecord'.

13   <Admin authProvider={authProvider} dataProvider={dataProvider} disableTelemetry>
                                             ~~~~~~~~~~~

And my getOne:

import { GetOneParams } from 'react-admin';

// ... code

getOne: async (resource: any, { id }: GetOneParams) => {
    return { data: { id } };
},

I think the key here is The types returned by 'getOne(...)' are incompatible

Setting proper return type GetOneResult has fixed the issue:

import { GetOneParams, GetOneResult } from 'react-admin';

// ... code

getOne: async (resource: any, { id }: GetOneParams): Promise<GetOneResult> => {
    return { data: { id } };
}

[fzaninotto]

@harishy100 This is an open-source project. Anyone can contribute. It’s not a critical problem for the core team, so we dedicate time to other problems for now.

If you want the bug fixed quickly, the best way is to fork the project, fix it yourself, and open a PR to have your fix merged in the react-admin code. If you don’t have the time or skills to do so, consider hiring Marmelab to fix the bug for you.