fetchData

Don't get confused with its name, actually, fetchData is a higher-order component which handles multiple tasks for you in a declarative way:

• Fetching data from an API endpoint
• Cancellation of previous requests
• Transformation of data with Web Worker support
• Validation of props and data
• Exposing internal states through ref.
• Handling loading, error, and blank states
• GraphQL Client Support (Query and Mutations) through graphQLOptions
• API polling (Future plan)

We're using it internally in all of our widgets. If there is any 3rd party widget that you think should have the same API as K2 widgets then you're at the right place.

Usage

import { fetchData } from "@k2/utils"

import SomeWidget from "some-library"

const ThirdPartyWidget = ({ data }) => {

return <SomeWidget data={data} />

}

const options = {...}

const EnhancedComponent = fetchData(options)(ThirdPartyWidget)

<EnhancedComponent url="/api/data" />

Types

Options

Property	Required	Description	Type
propsValidator	yes	Validate props passed to WrappedComponent	props => true OR Error
dataValidator	yes	Validate data passed to WrappedComponent	props => true OR Error
blankStateValidator	yes	Whether to show blank state or not	boolean
defaultComponentStates	no	Override loading, error and blank states	ComponentStates

Props

Property	Required	Description	Type
data	yes if url is not given	Data to pass to WrappedComponent	any
componentStates	no	Override loading, error and blank states	ComponentStates
url	yes if data is not given	URL of api endpoint to fetch data	string
urlOptions	no	Axios configuration to pass to URL	AxiosRequestConfig
graphQLOptions	no	GraphQL options (query and variables) to pass to URL	GraphQLOptions
mapData	no	Transform api response data	(payload: any, prevData: any, mapDataParams: any) => any
mapDataParams	no	Extra params passed to mapData function	any
runWorker	no	If true, data will be transformed using a web worker	boolean
ref	no	Ref of internal states Read More	React.Ref
onStatusChange	no	Called whenever status of API call changes	(obj: { status: string }) => void

There are some limitations of using a web worker which you can read here.