Moped Editor: GridTable bug with cache enabled

[sergiogcx]

There seems to be a strange problem happening when using the cache-first fetch policy in Apollo. It appears as if it is always loading. I do not understand why or how this bug happens.

In this case, I have been working on the projects list, and somehow it only affects certain sub-components of the GridTable component. This is fixed by using a no-cache policy, but it is strange that VZE was not affected by this. It is unpredictable what subcomponents will be affected, but more homework is needed.

[sergiogcx]

I've been reading some threads, but nothing conclusive as to what may be happening:

apollographql/react-apollo#3361
magento/pwa-studio#2230
apollographql/react-apollo#3270

[amenity]

This is a problem in Apollo that we encountered in VZE. We averted it there by using a no-cache policy.

[amenity]

@mddilley - please review and see if ☝️ is still the right approach.

[amenity]

This was addressed as described above.

[mddilley]

I spent some time looking at this and agree with Sergio and our previous experience in VZE that it is an elusive bug in the Apollo library. I was able to reproduce by changing rows per page in GridTable (as shown in the screenshot above).

I found some workarounds that involve triggering additional re-renders or using combined logic of loading and data results from useQuery, but it doesn't seem worth it at this point with no-cache fetch policy working.

Workarounds:
apollographql/react-apollo#3270 (comment)
apollographql/react-apollo#3774 (comment)

Hopefully, if this becomes a performance issue down the line, there will be a patch that addresses it on the Apollo side.

Migrating to @apollo/client https://www.apollographql.com/docs/react/migrating/apollo-client-3-migration/ might also fix this issue.