Apollo Client in Practice

Looking into the performance tab of Chrome dev tools lead me to believe the performance problems were caused by computations in the bottom components (e.g. formatting in cells). Because there are so many and they are re-rendered quite often, this approach is quite intensive on resources.

Besides that, the application had obvious state synchronization problems. When moving between views it was not maintaining the same state of selected rows. Even though Redux was used to store application state and communicate it between components, it was not used consistently. There were still plenty of React class components that stored some parts of the state locally.

To summarize, there were two issues that needed to be solved:

Since both issues were caused by (a lack of) architecture, we redesigned the structure of the application. The original implementation used:

Example of wrapping a component in a Query HOC:

Apollo reactively updates when using Query as a container, basically like the connect HOC in Redux. When the variables prop on the Query component is updated, it will automatically re-query. It uses the cache if possible and falls back to a network call if needed, although this behavior can be configured.

Having a single source of truth fixes the state synchronization problem. It also paves the way for improving the performance. In general, when a lot of data enters the application, it is a good idea to format it once and cascade the formatted data down to the components and it’s descendants with as little transformations to the data itself. This reduces the amount of computations in the lower components, which solves our other issue.

from a data object

to an array rows of cells

Apollo is excellent for merging data from multiple sources (in this case GraphQL, REST, local state and cache) and functions as a “single source of truth” which should solve the state synchronization problems. The local fields that Apollo uses in its local state manager can derive data, moving expensive operations from component render functions to resolvers in its application level cache. Although the issues mentioned in the introduction are now dealt with, we did encounter plenty of other issues I may dive into later. However, these are some things that you might want to take into account when working with Apollo Client:

Related posts:

Carbon taxes play the main role in the discourse on climate mitigation measures — but price signals alone will not save our natural bases of life. Thanks to increasing extreme weather events and the…

From my relatively short experience working in government, one of the most common things I hear colleagues talk about is the importance of ‘senior engagement’ or ‘upwards management’. Getting this…

Put your hands deep into the soil Can you feel it breathe? Is the moisture palpable? Do you know that your soul is mirrored in the plants? From a seedling in darkness to a rose in sunlight, that is…