use-fetch


Wrapper library around @nutgaard/use-async which simplifies doing fetch-request.

$3

``
npm install @nutgaard/use-fetch --save
`

$3


The library exposes one hook useFetch, the cache, and three utility-functions from @nutgaard/use-async to help use the result (isPending, hasData and hasError).

`typescript jsx
import React from 'react';
import useFetch, { isPending, hasError } from '@nutgaard/use-fetch';

function LoadingComponent() {
const result = useFetch('http://dummy.io');

if (isPending(result)) {
return ;
} else if (hasError(result)) {
return
}

return

{result.data}


}
`

Working with the cache:
`typescript jsx
import { cache, createCacheKey } from '@nutgaard/use-fetch';

const options: RequestInit = { credentials: 'include' };

export function prefetch(url: string) {
const cachekey = createCacheKey(url, options);
cache.fetch(cachekey, url, options);
}

export function putIntoCache(url: string, value: any) {
const cachekey = createCacheKey(url, options);
cache.put(cachekey, Promise.resolve(new Response(JSON.stringify(value))));
}

export function removeFromCache(url: string) {
const cachekey = createCacheKey(url, options);
cache.remove(cachekey);
}

`

$3

| Argument | Type | Optional | Default |
| ------------- | ------------- | ------------- | ------------- |
| url | string | No | - |
| option | RequestInit | Yes | undefined |
| config | Config | Yes | { lazy: false, cacheKey: undefined } |

The library will immediately perform fetch(url, option) when run, making sure to check its cache to avoid
loading the same data more then once.

If lazy is set to true it will not fetch data until result.rerun() is called.
cacheKey may be used to override the cachekey used to index data, if left as undefined a key is generated based on url and option`.

#### Types
Full documentation of types can be seen here, or in the 80-ish lines of code.

Credits

Made using the awesome typescript library starter