@faasjs/react
React plugin for FaasJS.
Install
npm install @faasjs/react
Modules
Classes
Type aliases
Functions
Type aliases
FaasDataInjection
Ƭ FaasDataInjection<Data>: Object
Injects FaasData props.
Type parameters
| Name | Type |
|---|---|
Data | any |
Type declaration
| Name | Type |
|---|---|
action | string | any |
data | Data |
error | any |
loading | boolean |
params | Record<string, any> |
promise | Promise<Response<Data>> |
setData | React.Dispatch<React.SetStateAction<Data>> |
setError | React.Dispatch<React.SetStateAction<any>> |
setLoading | React.Dispatch<React.SetStateAction<boolean>> |
setPromise | React.Dispatch<React.SetStateAction<Promise<Response<Data>>>> |
reload | (params?: Record<string, any>) => Promise<Response<Data>> |
FaasDataWrapperProps
Ƭ FaasDataWrapperProps<PathOrData>: Object
Type parameters
| Name | Type |
|---|---|
PathOrData | extends FaasAction |
Type declaration
| Name | Type | Description |
|---|---|---|
action | string | - |
data? | FaasData<PathOrData> | use custom data, should work with setData |
fallback? | JSX.Element | false | - |
params? | FaasParams<PathOrData> | - |
setData? | React.Dispatch<React.SetStateAction<FaasData<PathOrData>>> | use custom setData, should work with data |
onDataChange? | (args: FaasDataInjection<FaasData<PathOrData>>) => void | - |
render? | (args: FaasDataInjection<FaasData<PathOrData>>) => Element | Element[] | - |
FaasReactClientInstance
Ƭ FaasReactClientInstance: Object
Type declaration
| Name | Type |
|---|---|
FaasDataWrapper | <PathOrData>(props: FaasDataWrapperProps<PathOrData>) => Element |
faas | <PathOrData>(action: string | PathOrData, params: FaasParams<PathOrData>) => Promise<Response<FaasData<PathOrData>>> |
useFaas | <PathOrData>(action: string | PathOrData, defaultParams: FaasParams<PathOrData>) => FaasDataInjection<FaasData<PathOrData>> |
Options
Ƭ Options: RequestInit & { headers?: { [key: string]: string; } ; beforeRequest?: (__namedParameters: { action: string ; options: Options ; params: Record<string, any> }) => void | Promise<void> }
ResponseHeaders
Ƭ ResponseHeaders: Object
Index signature
▪ [key: string]: string
Functions
FaasDataWrapper
▸ FaasDataWrapper<PathOrData>(props): JSX.Element
A data wrapper for react components
Type parameters
| Name | Type |
|---|---|
PathOrData | extends FaasAction |
Parameters
| Name | Type |
|---|---|
props | FaasDataWrapperProps<PathOrData> |
Returns
JSX.Element
<FaasDataWrapper<{
id: string
title: string
}>
action='post/get'
params={ { id: 1 } }
render={ ({ data }) => <h1>{ data.title }</h1> }
/>
FaasReactClient
▸ FaasReactClient(__namedParameters): FaasReactClientInstance
Before use faas, you should initialize a FaasReactClient.
Parameters
| Name | Type |
|---|---|
__namedParameters | Object |
__namedParameters.domain | string |
__namedParameters.options? | Options |
__namedParameters.onError? | (action: string, params: Record<string, any>) => (res: ResponseError) => Promise<void> |
Returns
const client = FaasReactClient({
domain: 'localhost:8080/api'
})
faas
▸ faas<PathOrData>(action, params): Promise<Response<FaasData<PathOrData>>>
Request faas server
Type parameters
| Name | Type |
|---|---|
PathOrData | extends FaasAction |
Parameters
| Name | Type | Description |
|---|---|---|
action | string | PathOrData | action name |
params | FaasParams<PathOrData> | action params |
Returns
Promise<Response<FaasData<PathOrData>>>
faas<{ title: string }>('post/get', { id: 1 }).then(res => {
console.log(res.data.title)
})
getClient
▸ getClient(domain?): FaasReactClientInstance
Get FaasReactClient instance
Parameters
| Name | Type | Description |
|---|---|---|
domain? | string | empty string for default domain |
Returns
getClient()
// or
getClient('another-domain')
useFaas
▸ useFaas<PathOrData>(action, defaultParams): FaasDataInjection<FaasData<PathOrData>>
Request faas server with React hook
Type parameters
| Name | Type |
|---|---|
PathOrData | extends FaasAction |
Parameters
| Name | Type | Description |
|---|---|---|
action | string | PathOrData | action name |
defaultParams | FaasParams<PathOrData> | initial action params |
Returns
FaasDataInjection<FaasData<PathOrData>>
function Post ({ id }) {
const { data } = useFaas<{ title: string }>('post/get', { id })
return <h1>{data.title}</h1>
}