use-fetch

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

Installation

npm install @nutgaard/use-fetch --save

Usage

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

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

function LoadingComponent() {
    const result = useFetch('http://dummy.io');
    
    if (isPending(result)) {
      return <Spinner />;
    } else if (hasError(result)) {
      return <Error />
    } 
    
    return <pre>{result.data}</pre>
}

Working with the cache:

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);
}

useFetch API

| 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