用于自定义方法的 useDataProvider 钩子

Question

我调用const dataProvider = useDataProvider()我的组件，并且可以使用默认方法，dataProvider.getList("resource",{})没有任何问题。然后，我DataProvider使用自定义get方法扩展了我的方法，用于检索不具有所需Record结构的对象，如下所示：

  get: async <T = any>(
    resource: string,
    params: Partial<QueryParams>
  ): Promise<{
    data: T
  }> => {
    const url = `${apiUrl}/${resource}?${stringify(params)}`

    return httpClient(url)
      .then(({ json }) => ({
        data: json,
      }))
      .catch((e) => {
        console.log(e)
        return Promise.reject(e)
      })
  },

当我直接导入对象时，我可以毫无问题地使用此方法DataProvider，但是当我想将它与挂钩一起使用时，useDataProvider我会收到以下键入消息： (...a: unknown[]) => unknown

我必须添加/更改什么，以便我的自定义数据提供程序方法也具有正确的挂钩类型useDataProvider？

我使用的是react-admin3.14 版本，可能很快就会升级到 4.x。

Answer 1

这里有很多东西需要添加：首先，创建一个像这样的自定义 DataProvider 类型。

type CustomDataProvider = DataProvider & {
  get: <ResponseType = any>(
    resource: string,
    params: Partial<QueryParams>
  ) => Promise<{
    data: ResponseType
  }>
}

其次，创建自定义 DataProviderProxy 类型。

type CustomDataProviderProxy = DataProviderProxy & {
  get: <ResponseType = any>(
    resource: string,
    params: Partial<QueryParams>,
    options?: UseDataProviderOptions
  ) => Promise<{
    data: ResponseType
  }>
}

第三，在useDataProvider钩子中将其用作类型参数。

export function useCustomDataProvider() {
  return useDataProvider<CustomDataProvider, CustomDataProviderProxy>()
}

这允许在组件中正确使用类型化响应：

  const dataProvider = useCustomDataProvider()
  dataProvider.get<User>('user', {}).then(({ data }) => console.log(data.id))

感谢@FatihAziz 带领我走向正确的方向！