Support data providers in custom components

[Janpot]

Summary

Custom component authors should get access to data provider data to build their own data rich components. They should also be able to call the CRUD methods on these data providers. Concretely, Toolpad should offer an API that allows:

• custom component authors to mark a property of their component as having the type "data provider". This should enable the same user interface on the property that exists for the data grid.

• call a one of a specific set of hooks with the value of this property that allows interaction with the user provided data provider.
  tentative API shape:

  type DataProvider = Opaque // opaque value, obtained from the custom component property.
  
  interface GetManyOptions {
    filterModel: { /* ... */ },
    pagination: { /* ... */ }
  }
  
  interface GetManyHook {
    data: any[],
    error: Error | null,
    loading: boolean
  }
  
  interface DeleteOneHook {
    execute: (id: Id) => Promise<void>
    error: Error | null
    loading: boolean
  }
  
  interface createOneHook {
    execute: (values: R) => Promise<R>
    error: Error | null
    loading: boolean
  }
  
  interface UpdateOneHook {
    execute: (id: Id, values: Partial<R>) => Promise<R>
    error: Error | null
    loading: boolean
  }
  
  function useDataProviderGetMany(dataProvider: DataProvider, options: GetManyOptions): GetManyHook;
  
  function useDataProviderDeleteOne(dataProvider: DataProvider): DeleteOneHook;
  
  function useDataProviderCreateOne(dataProvider: DataProvider): createOneHook;
  
  function useDataProviderUpdateOne(dataProvider: DataProvider): UpdateOneHook;

  Alternatively, Toolpad could take the property name as a string in its first argument to the hooks.

Examples

No response

Motivation

#351 (comment)

Search keywords: data provider custom components