Data creation

Hooks

const [submit, loading] = usePost(url, options);
const [submit, loading] = useSecurePost(url, options);

usePost hooks executes an ajax POST request and returns back the payload sent by the server.
By default, the body of the request is a JSON string.

useSecurePost is similar to usePost but adds a Bearer authorization header that contains the token received and stored by useLoginService in the redux store

note

The data are stored in the state of the component and not in the redux store.

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
	onSuccess	AppSuccessCallback	if onSuccess is a function, this function is called on a successful GET (Promise / async allowed) if onError is a string then the value must be an URL. The hook does a redirect to this URL on a successful GET Defaults to: Nothing is done on a successful GET
	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
	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
submit	(data, options) => Promise	submit is a function that executes the ajax POST request. data is the body of the POST request options is the same object as the one used for usePost. Use this object to override an option passed to usePost
loading	boolean	A flag to indicate if the ajax request is pending

Examples

Minimal example

The example below shows how to submit a (fix) JSON object to a server.

Open in Codesandbox

examples/cra-data/src/pages/create-user.tsx

loading...

See full example on GitHub

Form submit

The example below shows how to submit data to a server by combining the data library (usePost) and the form library (useForm).

Open in Codesandbox

examples/cra-data/src/pages/create-user-form.tsx

loading...

See full example on GitHub

Success redirect

The example below shows how to redirect to the user list page if the user has been successfully created.

Open in Codesandbox

examples/cra-data/src/pages/create-user-success-redirect.tsx

loading...

See full example on GitHub