@faasjs/react
React plugin for FaasJS.
If you use SWR or React Query / TanStack Query, please use @faasjs/browser
directly.
Install
npm install @faasjs/react react react-dom
Modules
Classes
Interfaces
Type Aliases
- ErrorChildrenProps
- FaasAction
- FaasData
- FaasDataInjection
- FaasDataWrapperProps
- FaasParams
- FaasReactClientInstance
- Options
- ResponseHeaders
- useFaasOptions
Functions
Type Aliases
ErrorChildrenProps
Ƭ ErrorChildrenProps: Object
Type declaration
Name | Type |
---|---|
error? |
Error |
errorDescription? |
string |
errorMessage? |
string |
info? |
any |
FaasAction
Ƭ FaasAction: FaasActionPaths
| Record
<string
, any
>
FaasData
Ƭ FaasData<T
>: T
extends FaasActionPaths
? FaasActions
[T
]["Data"
] : T
Type parameters
Name | Type |
---|---|
T |
any |
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 >> |
reloadTimes |
number |
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 <any > |
FaasDataWrapperProps
Ƭ FaasDataWrapperProps<PathOrData
>: Object
Type parameters
Name | Type |
---|---|
PathOrData |
extends FaasAction
|
Type declaration
Name | Type | Description |
---|---|---|
action |
string |
- |
children? |
React.ReactElement <Partial <FaasDataInjection >> |
- |
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 [] |
- |
FaasParams
Ƭ FaasParams<T
>: T
extends FaasActionPaths
? FaasActions
[T
]["Params"
] : any
Type parameters
Name | Type |
---|---|
T |
any |
FaasReactClientInstance
Ƭ FaasReactClientInstance: Object
Type declaration
Name | Type |
---|---|
faas |
<PathOrData>(action : string | PathOrData , params : FaasParams <PathOrData >) => Promise <Response <FaasData <PathOrData >>> |
id |
string |
useFaas |
<PathOrData>(action : string | PathOrData , defaultParams : FaasParams <PathOrData >, options? : useFaasOptions <PathOrData >) => FaasDataInjection <FaasData <PathOrData >> |
FaasDataWrapper |
<PathOrData>(props : FaasDataWrapperProps <PathOrData >) => Element
|
Options
Ƭ Options: RequestInit
& { beforeRequest?
: ({ action, params, options, }
: { action
: string
; options
: Options
; params
: Record
<string
, any
> }) => Promise
<void
> | void
; headers?
: { [key: string]
: string
; } ; request?
: <PathOrData>(url
: string
, options
: Options
) => Promise
<Response
<FaasData
<PathOrData
>>> }
ResponseHeaders
Ƭ ResponseHeaders: Object
Index signature
▪ [key: string
]: string
useFaasOptions
Ƭ useFaasOptions<PathOrData
>: Object
Type parameters
Name | Type |
---|---|
PathOrData |
extends FaasAction
|
Type declaration
Name | Type | Description |
---|---|---|
data? |
FaasData <PathOrData > |
- |
debounce? |
number |
send the last request after milliseconds |
params? |
FaasParams <PathOrData > |
- |
setData? |
React.Dispatch <React.SetStateAction <FaasData <PathOrData >>> |
- |
skip? |
boolean |
- |
Functions
FaasDataWrapper
▸ FaasDataWrapper<PathOrData
>(props
): JSX.Element
A data wrapper for react components
Type parameters
Name | Type |
---|---|
PathOrData |
extends Record <string , any > |
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(«destructured»
): FaasReactClientInstance
Before use faas, you should initialize a FaasReactClient.
Parameters
Name | Type |
---|---|
«destructured» |
Object |
› domain
|
string |
› onError?
|
(action : string , params : Record <string , any >) => (res : ResponseError ) => Promise <void > |
› options?
|
Options |
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 Record <string , any > |
Parameters
Name | Type | Description |
---|---|---|
action |
string | PathOrData
|
{string} action name |
params |
FaasParams <PathOrData > |
{object} 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 |
{string} empty string for default domain |
Returns
getClient()
// or
getClient('another-domain')
useFaas
▸ useFaas<PathOrData
>(action
, defaultParams
, options?
): FaasDataInjection
<FaasData
<PathOrData
>>
Request faas server with React hook
Type parameters
Name | Type |
---|---|
PathOrData |
extends Record <string , any > |
Parameters
Name | Type | Description |
---|---|---|
action |
string | PathOrData
|
{string} action name |
defaultParams |
FaasParams <PathOrData > |
{object} initial action params |
options? |
useFaasOptions <PathOrData > |
- |
Returns
FaasDataInjection
<FaasData
<PathOrData
>>
function Post ({ id }) {
const { data } = useFaas<{ title: string }>('post/get', { id })
return <h1>{data.title}</h1>
}