@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

• ErrorBoundary
• Response
• ResponseError

Interfaces

• ErrorBoundaryProps

Type Aliases

• ErrorChildrenProps
• FaasAction
• FaasData
• FaasDataInjection
• FaasDataWrapperProps
• FaasParams
• FaasReactClientInstance
• Options
• ResponseHeaders
• useFaasOptions

Functions

• FaasDataWrapper
• FaasReactClient
• faas
• getClient
• useFaas

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

FaasReactClientInstance

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

FaasReactClientInstance

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>
}