options pollinterval after remount doesn't work

[pfulop]

Hi,

So I have noticed today another problem that comes from remounting a component (again same principle let's say we reroute and come back, the component was mounter->unmounted->mounted).

When using pollInterval this is what happens:

• 1st mount: query is refetched every interval seconds : pass
• umount: query is stopped from refetching: pass
• 2nd mount: queries is still stopped from refetching : fail

To me it seems to me that queries are created on first mount only and destroyed on unmount, but when remount happens the query is not recreated or something.

Can't it somehow be related to this line? From what I see the code checks if there are new props, and if so, it will subscribe to query only after that, but in polling I don't think there is necessity for new props.

[BLamy]

Just noticed this issue myself.

[jbaxleyiii]

@pfulop @BLamy can you see in the network panel if requests are still going out? If the data doesn't change, the child component won't update because no props have changed

[jbaxleyiii]

I added a test case for this (which is working as expected) in #150

[pfulop]

No the request are not going out since the polling is not active.

[jbaxleyiii]

@pfulop can you provide a reproduction or some code for me to look at?

[BLamy]

Example:

Assuming SomeContainer and AnotherContainer are containers bootstrapped with apollo queries using poll Interval and also provide a <Link to='/' />.

Starting at any page all poll intervals will work exactly once but if you navigate home and then back to the container the interval will not start again.

Mutations work. Manually calling refetch will work, However, it doesn't start the interval again.

const applications = [
  {
      title: 'SomeContainer',
      path: '/somepath',
      template: () => <SomeApolloContainer />
  },
  {
      title: 'AnotherContainer',
      path: '/anotherpath',
      template: () => <AnotherApolloContainer />
  }
];

const AppWrapper = ({ children }) => (
  <div>
    {children}
  </div>
);
AppWrapper.propTypes = {
  children: React.PropTypes.object.isRequired
};

const Home = ({ applications }) => (
   <div>
   {applications.map(app => (
      <Link to={app.path} >{app.title}</Link>
  )}
  </div>
);
Home.propTypes = {
  applications: React.PropTypes.array.isRequired
};

const App = () => (
  <ApolloProvider client={client} store={store}>
      <Router history={hashHistory}>
        <Route path="/" component={AppWrapper}>
          <IndexRoute component={() => <Home applications={applications} />} />
          {
            applications.map(app =>
              <Route key={app.title} path={app.path} component={app.template} />
            )
          }
          <Route path="*" component={() => <div>404</div>} />
        </Route>
      </Router>
  </ApolloProvider>
);

export default App;

[pfulop]

I dig around a little and I think it may be problem with apollo-client scheduler.

The thing is, if you add something on scheduler it's nice and warm there. When you take it out, scheduler clears it's own interval function (what is expected). However if you add it back, the scheduler takes this conditions
if (this.intervalQueries.hasOwnProperty(interval.toString())) { this.intervalQueries[interval].push(queryId); }
which will say yes there is already property with this key. In this case the interval is not set again and refetch won't happen ever again... Which is worse, when you have multiple pooling intervals across the app, once this happens you can add any more to the scheduler it will just ignore it, since it will go trough the same condition and never restarts interval function.

[pfulop]

I submitted PR there so this can be probably closed.