React-STR is a React Hooks library for remote data fetching.
"STR" stands for stale-till-revalidate, where STR returns data from cache (stale), until you revalidate it.
It features:
- Transport and protocol agnostic data fetching
- Revalidation on focus
- Typescript Ready
- Minimal API
... and a lot more coming soon.
With STR, components will get a stream of data updates constantly and automatically. Thus, the UI will be always fast and reactive.
import { useSTR } from "react-str";
const Home: React.FC = () => {
const getData = async url => {
const response = await fetch(url, { method: "GET" });
return response.data;
};
const [lazyFetch, {result, loading, error, revalidator} ] = useSTR(getData);
React.useEffect(() => {
lazyFetch(`https://api/user`);
}, []);
if (error) return <div>Something went wrong</div>;
if (isFetching) return <div>Loading...</div>;
return <div>Hello, {data.name}</div>;
};Inside your React project, add react-str using,
yarn add react-str
or with npm:
npm install react-str
const [lazyFetch, {loading, error, result, revalidator, viewCache}] = useSTR(
fetcherFn,
options
);fetcherFn: A function which accepts url of type string, and some parameters as second argument and returns result of data fetching operations.
-
result: result of data fetching operations, i.e result returned byfetcherFn. -
lazyFetch: function to be used for triggering data fetching, accepts same arguments asfetcherFn. Returns stale data if data already in cache. -
isFetching: Boolean value representing loading/fetching state of data fetching operation. -
error: Error object, in case data-fetching results in an error. -
revalidator: function to revalidate cache. Fetches data again, irrespective of its presence in cache and repopulates cache. Accepts same arguments aslazyFetch, arguments are optional. If no arguments provided, assumes arguments provided to lazyFetch. -
viewCache: Logs a snapshot of cache to console at that moment.
shouldRevalidateOnFocus = false: auto revalidate when window gets focused.loadingTimeout = undefined: timeout to trigger the onLoadingSlow event.onSuccess: callback function when a request finishes successfully.onError: callback function when a request results in an error.onLoadingTimeout: callback function when a request takes too long to load (seeloadingTimeout)revalidateOnReconnect = false: automatically revalidate when the browser regains a network connection
In next releases, STR will bring the following features -
- Error retries
- Request Deduping
- Polling
- Suspense
- Cache mutations
The MIT License.