vivek12345 / react-polling Goto Github PK

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'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()?

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?

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?

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

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 🎉

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.