react-restfully

React Restfully is a set of React Hooks and their analogous vanilla JS functions that assist you in fetching data using the fetch() API.

Version 1.0.0

Quickstart

[TOC]

Hooks

---

usePost

Example

function hello() {
	const {data, loading, error} = usePost('__URL__', {
		variables: {language: 'english'},
	});
	
	if(loading) return <p>Loading ...</p>;
	return <h1>Hello {data.greeting.message}!</h1>;
}

Function Signature

usePost(
    url: String,
    fetchOptions: fetchOptions = {}, 
    dependencies?: Array = []
): FetchResult

Params

url

PARAM	TYPE	DESCRIPTION
url	string	The URL to supply to fetch()

fetchOptions

OPTION	TYPE	DESCRIPTION
headers	array	Headers (See fetch.DefaultHeaders)
payload	Object∣Map	Data to pass down. (Note: payload is appended to the URL for Get requests)
onCompleted	function	Callback on successful fetch
onError	function	Callback on failed fetch
transform	Transform∣function∣boolean	Overrides default formatting of payload. Setting to FALSE will prevent any transformation to payload. (Note that the Transform object contains default transformation operations).
onError	ResponseTypes	Function used to handle the response body.

dependencies

PARAM	TYPE	DESCRIPTION
dependencies	array	The array of dependencies to pass to React's useEffect's second parameter. Used to determine when this hook is fired. Default: [].

Result

PROPERTY	TYPE	DESCRIPTION
data	object∣undefined	Data returned from query
loading	Boolean	Whether or not query is ongoing
hasErrors	Boolean	Whether or not errors have occurred
error	object∣undefined	Error returned. Defaults to undefined
payload	Object	Data passed down

---

useGet

Example

function hello() {
	const {data, loading, error} = useGet('__URL__', {
		variables: {language: 'english'},
	});
	
	if(loading) return <p>Loading ...</p>;
	return <h1>Hello {data.greeting.message}!</h1>;
}

Function Signature

useGet(
    url: String,
    fetchOptions?: fetchOptions = {},
    dependencies?: Array = []
): FetchResult

Params

url

PARAM	TYPE	DESCRIPTION
url	string	The URL to supply to fetch()

fetchOptions

OPTION	TYPE	DESCRIPTION
headers	array	Headers (See fetch.DefaultHeaders)
payload	Object∣Map	Data to pass down. (Note: payload is appended to the URL for Get requests)
onCompleted	function	Callback on successful fetch
onError	function	Callback on failed fetch
transform	Transform∣function∣boolean	Overrides default formatting of payload. Setting to FALSE will prevent any transformation to payload. (Note that the Transform object contains default transformation operations).
onError	ResponseTypes	Function used to handle the response body.

dependencies

PARAM	TYPE	DESCRIPTION
dependencies	array	The array of dependencies to pass to React's useEffect's second parameter. Used to determine when this hook is fired. Default: [].

Result

PROPERTY	TYPE	DESCRIPTION
data	object∣undefined	Data returned from query
loading	Boolean	Whether or not query is ongoing
hasErrors	Boolean	Whether or not errors have occurred
error	object∣undefined	Error returned. Defaults to undefined
payload	Object	Data passed down

---

useSubmit

Example

function Hello() {
	const [loadGreeting, {called, loading, data}] = useSubmit('__URL__', {
		variables: {language: 'english'},
	});

	if(called && loading) return <p>Loading ...</p>
	if(!called) {
		return <button onClick={() => loadGreeting()}>Load greeting</button>
	}
	return <h1>Hello {data.greeting.message}!</h1>;
}

Function Signature

useSubmit(
    url: String,
    fetchOptions?: fetchOptions = {}
): [(function(): void), FetchResult]

Params

url

PARAM	TYPE	DESCRIPTION
url	string	The URL to supply to fetch()

fetchOptions

OPTION	TYPE	DESCRIPTION
headers	array	Headers (See fetch.DefaultHeaders)
payload	Object∣Map	Data to pass down. (Note: payload is appended to the URL for Get requests)
onCompleted	function	Callback on successful fetch
onError	function	Callback on failed fetch
transform	Transform∣function∣boolean	Overrides default formatting of payload. Setting to FALSE will prevent any transformation to payload. (Note that the Transform object contains default transformation operations).
onError	ResponseTypes	Function used to handle the response body.

dependencies

PARAM	TYPE	DESCRIPTION
dependencies	array	The array of dependencies to pass to React's useEffect's second parameter. Used to determine when this hook is fired. Default: [].

Result

PROPERTY	TYPE	DESCRIPTION
data	object∣undefined	Data returned from query
loading	Boolean	Whether or not query is ongoing
hasErrors	Boolean	Whether or not errors have occurred
error	object∣undefined	Error returned. Defaults to undefined
payload	Object	Data passed down
called	Boolean	Whether or not the function has been called

Vanilla JS

---

post

Example

function App() {
	const [data, setData] = useState();
	useEffect(() => {
		post('https://gfgfsdagfsdagfsda.free.beeceptor.com/test', {
			payload: {language: 'english'},
		}).then(data => setData(data));
	}, []);

	if(typeof data === 'undefined') return <p>Loading ...</p>;
	return <h1>Hello {data.greeting.message}!</h1>;
}

Function Signature

post(
    url: Object,
    fetchOptions: fetchOptions = {}
): Promise

Params

url

PARAM	TYPE	DESCRIPTION
url	string	The URL to supply to fetch()

fetchOptions

OPTION	TYPE	DESCRIPTION
headers	array	Headers (See fetch.DefaultHeaders)
payload	Object∣Map	Data to pass down. (Note: payload is appended to the URL for Get requests)
onCompleted	function	Callback on successful fetch
onError	function	Callback on failed fetch
transform	Transform∣function∣boolean	Overrides default formatting of payload. Setting to FALSE will prevent any transformation to payload. (Note that the Transform object contains default transformation operations).
onError	ResponseTypes	Function used to handle the response body.

---

get

Example

function Hello() {
	const [data, setData] = useState();
	useEffect(() => {
		get('__URL__', {
			payload: {language: 'english'},
		}).then(data => setData(data));
	}, []);

	if(typeof data === 'undefined') return <p>Loading ...</p>;
	return <h1>Hello {data.greeting.message}!</h1>;
}

Function Signature

get(
    url: Object,
    fetchOptions: fetchOptions = {} 
): Promise

Params

url

PARAM	TYPE	DESCRIPTION
url	string	The URL to supply to fetch()

fetchOptions

OPTION	TYPE	DESCRIPTION
headers	array	Headers (See fetch.DefaultHeaders)
payload	Object∣Map	Data to pass down. (Note: payload is appended to the URL for Get requests)
onCompleted	function	Callback on successful fetch
onError	function	Callback on failed fetch
transform	Transform∣function∣boolean	Overrides default formatting of payload. Setting to FALSE will prevent any transformation to payload. (Note that the Transform object contains default transformation operations).
onError	ResponseTypes	Function used to handle the response body.