Documents / @faasjs/ant-design / withFaasData

Function: withFaasData()

withFaasData<Path, TComponentProps>(Component, faasProps): FC<Omit<TComponentProps, keyof FaasDataInjection<Path>>>

Wrap a component with FaasDataWrapper and its Ant Design loading fallback.

Type Parameters

Path

Path extends FaasActionPaths

Registered action path used to infer params and response data.

TComponentProps

TComponentProps extends Required<FaasDataInjection<Path>> = Required<FaasDataInjection<Path>>

Component props including every field from FaasDataInjection.

Parameters

Component

FC<TComponentProps & Record<string, any>>

Component that consumes injected Faas data props.

faasProps

FaasDataWrapperProps<Path>

Request configuration forwarded to FaasDataWrapper; this is the second argument.

Returns

FC<Omit<TComponentProps, keyof FaasDataInjection<Path>>>

Higher-order component that accepts caller-owned props while withFaasData supplies the Faas data props.

Example

import { type FaasDataInjection, withFaasData } from '@faasjs/ant-design'

declare module '@faasjs/types' {
  interface FaasActions {
    'user/get': {
      Params: { id: number }
      Data: { name: string }
    }
  }
}

type GetUserAction = 'user/get'
type UserCardProps = FaasDataInjection<GetUserAction> & {
  compact?: boolean
}

const UserCard = ({ data, error, reload, compact }: UserCardProps) =>
  error ? (
    <a onClick={() => reload()}>Retry</a>
  ) : (
    <div>{compact ? data.name : `User: ${data.name}`}</div>
  )

const UserCardWithData = withFaasData<GetUserAction, UserCardProps>(UserCard, {
  action: 'user/get',
  params: { id: 1 },
})