How to show a spinner during queries fetching and how to refresh queries themselves?

[max-zelinski]

I have two questions:

• How to show a spinner during queries fetching?
• How can I refresh query itself?

[RickWong]

How to show a spinner during queries fetching?

You can pass a React element as the emptyView prop to the Transmit container. In the next release I'm going to make it possible to pass a function with that prop.

How can I refresh query itself?

Call this.props.setQueryParams() from the component.

[max-zelinski]

@RickWong do you mind adding an ability to set emptyView during createContainer (for example, in options)? So the container itself will have an ability to specify what view should be rendered during query fetching?

[RickWong]

Actually, I do have an opinion on this matter. See if any component must decide whether to render an empty view, then it should be the parent component. Because A) The Transmit container should only care about fetching queries into props to pass down, or being in the process of doing that. It should be as transparent as possible. B) The child component should only be tasked with rendering the query results that it knows about. It doesn't know anything about spinners, I do hope.

Putting it differently: How does a pizza smell? Like pizza. How does the box containing pizza smell? Like pizza. But how does an empty box smell? Like cardboard.

So the cleanest solution is to create a Spinner component and pass that as emptyView via the parent's render method.

[max-zelinski]

Thanks for explaining your idea - makes sense.

Regarding rerunning the query: this.props.setQueryParams() works, but it doesn't show emptyView during query rerun. Was it also designed like this?

I've a use case when I need to implement a 'refresh' button that will rerun the query (now I know how) and also it must display spinner while the query is still executing.

[max-zelinski]

My issue with this.props.setQueryParams() not showing emptyView can be fixed with just one line of code :)

[RickWong]

Thanks for exploring this feature. I think need to correct myself, and say that emptyView is really not for showing a spinner to indicate activity. A much better hook is the onQuery hook. That hook is called with the promise that resolves the queries, on the moment the promise is still resolving. With the .then chain you can catch the moment that the results are in.

[max-zelinski]

I tried creating HoC on top of react-transmit to use onQuery for providing 'isLoading' property to a wrapped react component like this:

module.exports = function (Component, props) {
  var assign = React.__spread;

  var transmit = Transmit.createContainer(Component, props);

  var Container = React.createClass({
    getInitialState: function() {
      return {
        isLoading: false
      };
    },
    onLoading: function(promise) {
      this.setState({ isLoading: true });
      var that = this;
      promise.then(function() {
        that.setState({ isLoading: false });
      });
    },
    render: function() {
      var utilProps = {
        onQuery: this.onLoading,
        isLoading: this.state.isLoading
      };

      return React.createElement(transmit, utilProps);
    }
  });

  return Container;
};

I use it this way:

module.exports = QueryComponent(ReactComponent, {
  queries: {
    data: function() {
      return Store.getData();
    }
  }
});

unfortunatly this doesn't work because react-transmit overwrittes onQuery when rendering wrapped component:

var utilProps = {
    queryParams: this.currentParams,
    setQueryParams: this.setQueryParams,
    onQuery: undefined
};

Is there any specific logic behind this? I need this property to show a spinner inside my react component when query is rerun and is still executing. emptyView doesn't fit because it replaces the whole view.