Add refreshInterval

[charlax]

Hey,

Thanks for react-axios!

What would you think about adding a refreshInterval prop to refresh the data periodically? To let the child know that it's refreshing, there would another parameter isRefreshing.

Like https://github.com/heroku/react-refetch#automatic-refreshing - we could even use the same behavior:

When refreshing, the PromiseState will be the same as a the previous fulfilled state, but with the refreshing attribute set. That is, pending will remain unset and the existing value will be left in tact. When the refresh completes, refreshing will be unset and the value will be updated with the latest data. If the refresh is rejected, the PromiseState will move into a rejected and not attempt to refresh again.

[charlax]

What do you think?

[sheaivey]

Hello @charlax, sorry for the delay. I was looking over the react-refetch and I don't think this functionality needs to be built in explicitly to react-axios.

The simplest and most appropriate way I think to implement this would be would be to take advantage of the child call back function from react-axioss by adding your own setTimeout on success that will call the available helper method onReload(). This will continue to to call setTimeout every time the xhr resolves. You can even send new props to onReload(newProps) if you need each interval to call a different URL. It is also already scoped if you happen to have multiple instances of react-axios in your app.

If you need to do anything more complex or want to reuse code I would suggest crating a component that wraps what is described above and takes the an interval prop or anything else you want to make dynamic.

I have tried this and it really is just this simple:

<Get url="http://example.com/"> {
  (error, response, isLoading, onReload) {
    if(error) {
      // error
      return (<div>Something bad happened: {error.message}</div>)
    } else if(isLoading) {
      // loading
      return (<div className="loader"></div>)
    } else if(response !== null) { 
      // success
      setTimeout(()=>{onReload()}, 2000) // the interval magic is here
      return (<div>{response.data.message}</div>)
    }
    return null
  }
</Get>

Hopefully this helps you accomplish your task.

[charlax]

Hey - that makes sense, and it's actually what I did while posting this :)

There's always a tradeoff between providing too few and too many features. I thought this one would make sense, but I respect your decision.