@faasjs/react

License: MITopen in new windowNPM Stable Versionopen in new windowNPM Beta Versionopen in new window

React plugin for FaasJS.

If you use SWRopen in new window or React Query / TanStack Queryopen in new window, please use @faasjs/browseropen in new window directly.

Install

npm install @faasjs/react react react-dom

Modules

Classes

Interfaces

Type Aliases

Functions

Type Aliases

FaasAction

Ƭ FaasAction: FaasActionPaths | Record<string, any>


FaasData

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

Type parameters

NameType
Tany

FaasParams

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

Type parameters

NameType
Tany

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

NameType
PathOrDataextends Record<string, any>

Parameters

NameType
propsFaasDataWrapperProps<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

NameType
«destructured»Object
› domainstring
› 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

NameType
PathOrDataextends Record<string, any>

Parameters

NameTypeDescription
actionstring | PathOrData{string} action name
paramsFaasParams<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

NameTypeDescription
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

NameType
PathOrDataextends Record<string, any>

Parameters

NameTypeDescription
actionstring | PathOrData{string} action name
defaultParamsFaasParams<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>
}