Component wrapped in <ApolloConsumer> gets unmounted and remounted when writeToStore fails

[yoduoy]

Hi there,

My app has the following components structure:

<Layout>
    <MyHeader>
        <MyRoster /> // created by compose(withRouter, withApollo, withRosterMutation)
                  // where withRosterMutation does a graphql mutation and eventually
                  // writeToStore when mutation succeeds (*1)
    </MyHeader>
    <MyMain>
        <MainRenderer />
    </MyMain>
    <MyFooter>
        <ApolloConsumer>
            {client => setUser(userId, client)} // *2 needs ref to client to update cache
        </ApolloConsumer>
    </MyFooter>
</Layout>

The behavior I observed is: when the writeToStore at *1 fails (due to missing a field in the fragment), inside Apollo cache, it does a warning without throwing any exception (see code below copied from writeToStore.ts). But What I noticed is that both the MyRoster component and the component at *2 are unmounted (componentWillUnmount called) and remounted (componentDidMount called); while and components are not unmounted/remounted.

          if (!isDefered && context.fragmentMatcherFunction) {
            // XXX We'd like to throw an error, but for backwards compatibility's sake
            // we just print a warning for the time being.
            //throw new WriteError(`Missing field ${resultFieldKey} in ${JSON.stringify(result, null, 2).substring(0, 100)}`);
            if (!isProduction()) {
              console.warn(
                `Missing field ${resultFieldKey} in ${JSON.stringify(
                  result,
                  null,
                  2,
                ).substring(0, 100)}`,
              );
            }
          }

It gives me the impression that by using or , the wrapped component is automatically subscribed to events (like cache write warnings) inside Apollo cache, and the effect is that such wrapped components would get unmounted/remounted if these events happen.

Is this understanding correct? If not, what else might have caused this behavior? If so, how to avoid this behavior?

• apollo-client@2.2.0
• react-apollo@2.1.4

Thanks a lot!

[yoduoy]

Anyone with any advice?

[hwillson]

Remounting shouldn't be happening. If this is still a problem for you with react-apollo >= 2.5.6, and you're able to provide a small runnable reproduction that shows this, we'll take a look. Thanks!