esphen / fetch-hoc Goto Github PK
View Code? Open in Web Editor NEWA react HoC for fetching a resource and passing to props
License: MIT License
A react HoC for fetching a resource and passing to props
License: MIT License
Hi, I am wondering, since options
is an object, how to add authorization headers, coming from props?
My use case:
I am writing an electron app, storing api keys to a redux store. Since the store is available through props, how can I pass props data to fetch-hoc's options?
After updating to 0.2, none of my requests are fired anymore, loading prop is always false and data always undefined.
Two components on the same page should not need to send two REST requests to fetch the same data. They should be able to share each others' data. This could be a nice performance boost in some cases.
This could also enable fetch-hoc to be a drop in replacement of redux, where you could have a fetchUser fetchHOC in many components around your app.
This can be solved with a cache module, which handles which URLs are currently being fetched.
To dodge some cache confusion, I feel it should clear the cache on unmount if no other components rely on this data so that next time a component mounts with this URL, it re-fetches it. This could be done by keeping track of how many components currently subscribe to the cache entry, and clearing it when it becomes 0.
An example of how this cache could look:
const cache = {
'https://google.com': {
subscribers: 2,
data: (received data),
fetching: true,
awaitCompletion: Promise,
},
};
And the corresponding FetchHOC code might look something like this:
const cacheEntry = cache[url];
if (cacheEntry && cacheEntry.fetching) {
++cacheEntry.subscribers;
await cacheEntry.awaitCompletion();
this.setState(/* data from cacheEntry */);
} else {
cache[url] = {
data: null,
fetching: true,
subscribers: 1,
awaitCompletion: new Promise(...),
};
// fetch as normal
}
Is there any way to re fetch even if the url hasn't changed? An example of why this would be useful would be if the data stored at an endpoint changed from a user interaction, and the hoc needs to refresh its contents without completely wanting to reload the page. Considering forking off this repository to attempt to add a flag for this so the componentWillUpdate does not ignore it, but was wondering if you had any suggestions. Thanks!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.