Alert! This package is using experimental React features.
Use React context to cache data and manager fetch resources on React Applications.
In example folder you will see a complete application example using hooks and zero class components.
Provider component don't share cache between other Provides components, so you can use same name of resources for differents Providers.
npm install --save context-cache-providerSetting the react-context-cache provider
import React, { createContext} from 'react'
import Provider from 'context-cache-provider'
const context = createContext();
export context;
function fetchItems(query = {}) {
return fetch('http://apiserver.io', {
body: JSON.stringify(query)
}).then(response => response.json());
}
export default function ProviderItems({children}) {
return <Provider context={context} fetchItems={fetchItems}>
{children}
</Provider>;
}Using the context to bring resources inside of your components
import React, { Suspense, useContext } from 'react'
import {context} from './provider-items'
export default function ListItems() {
const { getResource } = useContext(context);
function renderList() {
const data = getResource('fetchItems')();
return <ul>
{data.map(item => <li>{item.title}</li>}
</ul>;
}
return <Suspense fallback={<div>Loading...</div>}>
{renderList()}
</Suspense>;
}You can have many Providers you want each one with your own resources.
Return the function resource
getResource(resourceName:String, invalidateCacheItem:Boolean):Function
Clean cache from component provider
clearCache()
Check if exist cache item for this resource and resource arguments
hit(resourceName:String, ...args:any)
Provider is a cache component using context that map resources.
When you get resource and call him, the provider will throw the promise returned by resource, then react will suspense the render if your component was wrapper by Suspense React Component.
It's a component where you can bring resources to your components
It's a function that return a promise or an observable.
To run example you should install all deps.
cd example
yarn
yarn start
MIT © stvkoch