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. |