vivek12345 / react-polling Goto Github PK
View Code? Open in Web Editor NEW๐ Polling an api made easy with react-polling
License: MIT License
๐ Polling an api made easy with react-polling
License: MIT License
I'm not a 100% sure on the usage of startPolling and stopPolling. When will I need this? Can you pls provide an example for the same?
react-polling/src/ReactPolling.js
Line 127 in 6a807c2
I'm attempting to use the component for an asynchronous REST service, where the /status
endpoint will respond with 202
and an empty response body until the service eventually succeeds.
However, since the response function evaluates Body.json()
, I'm suspecting the polling stops on an unhandled error. Perhaps the function should guard with a test for non-empty body before evaluating Body.json()
?
Instead of having to provide the url, headers, body, etc and then that be used in fetch, it would be great if given the user the option to simply provide a promise also which is called instead.
The use case arises when you build your own clients for your backend server and want to use those, since they already incoporate your custom setup of authentication, logging, error handling etc. And you might want to use your own http client or rest client. An infact might want to use your own websocket client. Making the api generic to handle any promise leads to a lot of possibilities.
Losing all the functionality by only giving the option to use fetch therefore is not ideal.
So I would propose this api change, and if it makes sense to you then I'd be happy to make a PR.
// Adding a new prop called promise which you can provide instead of url, headers, body, etc
const customPromise = backend.service('/database/users').get(userId)
<ReactPolling
promise={customPromise}
interval= {3000} // in milliseconds(ms)
retryCount={3} // this is optional
onSuccess={() => console.log('handle success')}
onFailure={() => console.log('handle failure')} // this is optional
render={({ startPolling, stopPolling, isPolling }) => {
if(isPolling) {
return (
<div> Hello I am polling</div>
<Spinner />
</div>
);
} else {
return (
<div> Hello I stopped polling</div>
</div>
);
}
}}
/>
// Inside the libary a one line change is made like so
runPolling() {
const { url, interval, onSuccess, onFailure, api } = this.config;
const _this = this;
this.poll = setTimeout(() => {
/* onSuccess would be handled by the user of service which would either return true or false
* true - This means we need to continue polling
* false - This means we need to stop polling
*/
const promise = this.props.promise ? this.props.promise : () => fetch(url, api)
promise()
.then(resp => {
return resp.json().then(data => {
if (resp.ok) {
return data;
} else {
return Promise.reject({ status: resp.status, data });
}
});
})
.then(onSuccess)
.then(continuePolling => {
_this.state.isPolling && continuePolling ? _this.runPolling() : _this.stopPolling();
})
.catch(error => {
if (_this.config.shouldRetry && _this.config.retryCount > 0) {
onFailure && onFailure(error);
_this.config.retryCount--;
_this.runPolling();
} else {
onFailure && onFailure(error);
_this.stopPolling();
}
});
}, interval);
}
Thanks for all your work on this ๐
Hi,
When I try to call the react-polling component multiple times from within my react app then polling works for only the first time. If I pass in different props based on change in some state, then the polling doesn't work.
Is it expected behaviour?
I think you can use React context and provide some sort of API that would be used like
const { forcePoll, isPolling } = useReactPolling("url");
// generally use the nicer method to check if it is already polling to wait for the poll to finish this could be the default
forcePoll({ method: "nice"} );
// Other methods
// forcePoll({ method: "force"} ); don't care, just re-execute the polling routine even if it is already running
// forcePoll({ method: "queue"} ); queue it up to poll after the current poll is done, calling multiple times will queue it up some more
// forcePoll({ method: "queue_once"} ); queue it up to poll after the current poll is done, calling multiple times will still only retain one
Thanks for the handy component @vivek12345 ๐
I was wondering if there is anyway to modify the url on each poll - say /resource/1
, /resource/2
etc. From what I could gather, this is not possible as of now?
First of all: great work!
But I don't understand how those two functions are supposed to work. Calling them in the render property like so
render={({ startPolling, stopPolling, isPolling }) => { if (this.state.view === 'results') { stopPolling(); } }}
leads to an TypeError:
TypeError: Cannot read property '_ismounted' of undefined
What I'd like to to is to stop polling for a certain state in the application and re-start it after another event occurs.
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.