Data retrieval

Oneki.js provides several hooks to retrieve data from a server via an AJAX GET request

Hooks

const [data, loading, refresh] = useGet(url, options);
const [data, loading, refresh] = useSecureGet(url, options);
const [data, loading, refresh] = useCache(url, options);

useGet hook executes an ajax GET request and returns back the data.
The ajax request is made during the mount of the component and each time the URL is updated.
The data is stored in the component state and not in the redux store

useSecureGet is similar to useGet but adds a authorization header Bearer which contains the token received and stored by useLoginService in the redux store

useCache hook is similar to useGet except that the data is cached in the redux store (one entry in the store per URL)
Therefore, the ajax request is only executed if the cache is not yet present in the store or if the cache is no longer valid.

Parameters

Inputs

Mandatory parameters are marked with a *

Parameter		Type	Description
url*		string	the URL to which the Ajax request is sent
options			An optional object to specify additional options
	onError	AppErrorCallback	if onError is a function, this function is called if the HTTP response is a 4xx or 5xx (Promise / async allowed) if onError is a string then the value must be an URL. The hook does a redirect to this URL Defaults to: the hook sends a notification to the error topic
	delayLoading	number	The number of milliseconds to wait before setting the loading flag to true. This value is useful to not display a loading indicator if the request is executed rapidly. Defaults to: 0
	defaultValue	T	(only supported by useGet). The value returned while the AJAX request is pending. Defaults to: undefined
	auth	object	Contains the credentials to be sent in the request. See Auth. Defaults to: no credentials sent
	headers	object	the HTTP headers to add in the request Defaults to: no headers added in the request
	params	object	Params in the url. Example: if the user is /user/:userId, options.params could be {userId: '1'}
	query	object	Query params to add the URL. Example: If the final url is /users?name=Doe, options.query will be {name: 'Doe'}

note

The options object also accept these additionnal parameters supported by the fetch API

headers,
credentials,
cache,
redirect,
referrer,
referrerPolicy,
integrity,
keepalive,
signal

Outputs

Parameter	Type	Description
data	T	the data returned by the server. The value is null while the ajax request is pending
loading	boolean	A flag to indicate if the ajax request is pending
refresh	() => void	a function that can be called to force a re-execution of useGet

Examples

Minimal example

The minimal example shows how to retrieve data from a backend server.
A loading indicator (Loading ...) is displayed while the AJAX request is pending.

Open in Codesandbox

examples/cra-data/src/pages/list-users.tsx

loading...

See full example on GitHub

Cache example

Open in Codesandbox

examples/cra-data/src/pages/list-users-cache.tsx

loading...

See full example on GitHub

Polling example

Open in Codesandbox

examples/cra-data/src/pages/list-users-pooling.tsx

loading...

See full example on GitHub

loading delay example

Show a loading indicator only if the data is not retrieved in less than 100 ms.

Open in Codesandbox

examples/cra-data/src/pages/list-users-delay.tsx

loading...

See full example on GitHub

onError example

This is an example showing how to use the onError handler

Open in Codesandbox

examples/cra-data/src/pages/list-users-on-error.tsx

loading...

See full example on GitHub

onError with notification example

This example shows how to handle onError using the notification service

Open in Codesandbox

examples/cra-data/src/pages/list-users-error-notification.tsx

loading...

See full example on GitHub