Improve loading pattern for tags and navItems #461
Merged
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Resolves #458
Impact: minor
Type: performance
Issue
For a shop with >200 tags, paging would be necessary when loading tags to build the navigation tree, and this was causing slow loading of the top nav and/or errors.
Solution
The way we were doing the loading was susceptible to extra looping due to calling
fetchMore
within arender
function. However, Apollo'sQuery
component does not give any better ways to do it. There is anonCompleted
function, but it seems to get called only sporadically (maybe only when loading from network and not from cache).Furthermore, our aim with loading all of the tags is actually to build a single tree for nav, so it's beneficial if we can loop through and load all of the pages, and then build the nav, prior to loading the app at all.
So for now I am doing all of the loading and building in the
getInitialProps
of the_app.js
layout. I'm then passing those to a MobX Provider, which components that need tags or navItems are now injecting.This seems to work much better. It should be loading from the Apollo cache after the first time, so it should be good performance as far as API and database hits.
We will soon rewrite this to load the entire nav tree at once, using the new
defaultNavigationTree
query, but that isn't released yet. At that time, we may be able to revert back to using a Query component since it will then be a single query rather than looping pages.Breaking changes
If you have custom components using
tags
ornavItems
, you'll need to inject those props from MobX and the tag structure has been flattened a bit.Testing
Nav loading should be relatively fast and without errors.