@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

• FaasBrowserClient
• Response
• ResponseError

Interfaces

• FaasDataInjection
• FaasDataWrapperProps
• FaasReactClientInstance

Type Aliases

• FaasAction
• FaasData
• FaasParams
• Options
• ResponseHeaders

Functions

• FaasDataWrapper
• FaasReactClient
• faas
• getClient
• useFaas

Type Aliases

FaasAction

Ƭ FaasAction: FaasActionPaths | Record<string, any>

---

FaasData

Ƭ FaasData<T>: T extends FaasActionPaths ? FaasActions[T]["Data"] : T

Type parameters

Name	Type
T	any

---

FaasParams

Ƭ FaasParams<T>: T extends FaasActionPaths ? FaasActions[T]["Params"] : any

Type parameters

Name	Type
T	any

---

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

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?	Object	-
options.data?	FaasData<PathOrData>	-
options.setData?	Dispatch<SetStateAction<FaasData<PathOrData>>>	-
options.skip?	boolean	-

Returns

FaasDataInjection<FaasData<PathOrData>>

function Post ({ id }) {
  const { data } = useFaas<{ title: string }>('post/get', { id })
  return <h1>{data.title}</h1>
}