React-apollo: fetchMore changed behaviour after apollo-client/react-apollo 1.00 update

[JustasPolis]

I've encountered a different behaviour with fetchMore function when updated to newest apollo and react-apollo versions, not sure if it's a bug in newer version or it was a bug in previous versions.

Code is same in both examples, will post a code to reproduce an issue if necessary.

previous version: https://gfycat.com/TidySoggyGalapagosdove
last version: https://gfycat.com/ImpressiveQueasyDikdik

Buggy Behavior

As you can see in posted gifs, in old version example when pressing load more button, whole UI does not re-render, in new updated version whole list re-renders.

Expected Behavior

Not sure if it's intended to be like this, or it was bug in previous versions, but I expect that whole list should not re-render when loading more entries.

Version

• apollo-client 1.0.0-rc.2
• react-apollo 1.0.0-rc.2

[calebmer]

What version did you upgrade from? Also, if you could make a small reproduction using react-apollo-error-template it would go a long way in helping us fix the issue 😊

[JustasPolis]

Previous Version

• apollo-client 0.10.1
• react-apollo 0.13.2

Ok will do, is it ok if I'll use external API like graph.cool with react-apollo-error-template to reproduce issue ? :)

[calebmer]

If you’d like, but it should be much easier to just edit the GraphQL.js schema so you don’t have to hit a server at all 😊 https://github.com/apollographql/react-apollo-error-template/blob/master/src/graphql/schema.js

[JustasPolis]

Well I have zero experience yet building graphql schemas and resolvers, especially with offsets and pagination stuff.
If you really need/would be easier to fix it, I can learn and build same backend API as I'm using now from graph.cool, but not sure how much time it will take :)

Old Version: https://github.com/JustasPolis/Apollo_Old_Version
New Version: https://github.com/JustasPolis/Apollo_New_Version

Reproduced same issue i'm facing in given GIF's in original post ;).

Thank you for your time !

[calebmer]

Thanks for the reproduction! I know what’s going on 😊

In an older version of Apollo Client we had a bug where loading would be false after fetchMore() was called. This is obviously undesirable. So we fixed that bug and loading is now true after fetchMore() gets called and then false again after the fetchMore() call finishes.

In your case this means that the Loading... screen is triggered and you see what is effectively a “flash.” To fix this I recommend changing your loading check from:

if(loading) {
 // Render loading...
}

To:

if(loading && !Trainer) {
 // Render loading...
}

Where Trainer is the top level data field in your example. What this says is that even if we are loading I want to render any data that we may currently have.

However, this may be problematic if you want to render the loading screen when you are, say, refetching your data. In this case you may use the networkStatus instead of loading which allows you to do:

if(loading && networkStatus !== 3) {
 // Render loading...
}

To learn more about networkStatus and what different values for networkStatus means, read its documentation: http://dev.apollodata.com/react/api.html#graphql-query-data.networkStatus

Hope this helps 👍

[JustasPolis]

Awesome ! Thank you @calebmer