Skip to content

devsrv/cachedfetch

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

17 Commits
 
 
 
 
 
 
 
 

Repository files navigation

cachedFetch

A micro utility built around the Fetch API that allows caching network query results. Support localStorage, sessionStorage, AsyncStorage (React Native)

📥 Installation

simply include the adapter.min.js file in your project

🧪 The config file :

const config = {
    mode: 'block',	//support block | allow
    matchIn: [
        'https://jsonplaceholder.typicode.com/posts/1'
    ],
    endsWith: [
        '?postId=1',
        // '/posts'
    ],
    defaultTTL: '5 day',	// day | hour | minute | second
    driver: 'sessionStorage', // localStorage (default) | sessionStorage | AsyncStorage
    disk: undefined			// undefined | AsyncStorage
};

For React Native

import AsyncStorage from '@react-native-async-storage/async-storage';

const config = {
    mode: 'block',
    .
    .
    driver: 'AsyncStorage',
    disk: AsyncStorage
};

Initialization with common headers & config

const headers = new Headers();
headers.append('Accept', 'application/json');
headers.append('Content-Type', 'application/json');
headers.append('X-Requested-With', 'XMLHttpRequest');
// headers.append('X-CSRF-Token', document.querySelector('meta[name="csrf-token"]').content);
import _initCachedFetch from './the-minified-adapter-file-above';	// alternative to including the bundled js as external script

const cachedFetch = _initCachedFetch(config, headers);

EXAMPLES


1. GET request with override cache mode

cachedFetch('fetch_posts', 'https://jsonplaceholder.typicode.com/posts', {
    'keep-cache' : true, // override mode
    cacheTTL: '1 minute'
    // any additional options goes here
})
.then(r => r.json())
.then(res => console.log('result', res));

2. POST request (using global cache config)

cachedFetch('add_user', 'https://reqres.in/api/users', {
    method: 'POST',
    body: JSON.stringify({name: 'sourav', job: 'engineer'}),
})
.then(r => r.json())
.then(res => console.log('result', res));

3. when content-type text/*

cachedFetch('fetch_posts', 'https://httpbin.org/html', {
    'keep-cache' : true,
    cacheTTL: '1 minute'
})
.then(r => r.text())
.then(res => console.log('result', res));

👋🏼 Say Hi!

Leave a ⭐ if you find this package useful 👍🏼,

also don't forget to let me know in Twitter

About

the fetch api with the ability to cache response

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors