[SPIKE] URL Mapping - Asynchronous Configuration Method #1641
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.
Description
In this PR we investigate implementing the Shopper SEO "Url Mapping" API endpoint into the PWA-Kit platform. The primary strategy for this PR is to use the
withReactQuery
higher-order component to allow us to pre-populate the query client cache.How does this PR work?
Server-Side: To make things work server-side we first need to know what type of page component we are rendering. Because the rendering is a 2-stage affair, aka we scan for queries to run then wait for them to complete and render again, it means we can't introduce a third blocking action as it would break rendering.
To solve this problem we update the API for the with-react-query hoc allowing the developer to pass an initial 'dehydratedState' that will be use as the initial value in the clients cache. This in effect means when it comes to determining what hooks are running we are back to the 2-stage rending working.
If it's not obvious the initial data that we'll be populating is the url mapping for the current url path if one exists. With this data we can update the rendering pipeline to see if we have a url map, and render a special page that will use that data to conditionally render either the category, product, page not found, redirect, or error pages.
Client-Side: As the PWA stands routing is a one shot snychronous event, you can't block it from happing. So we needed to solve how we could do this, as potentially any link/url on the website could be one that is either a redirect or custom, we just don't know it yet. This is where we introduced the
useBlock
hooks, this special hook will allow you to block transitions from one page to another, giving you time to make an API request for the desired page. We used this idea a little differently and simple redirect all transitions to that same special page that is used to determine what page type to render based on the url mapping data.Issues
We should not implement redirects and custom urls solely in the PWA, we need to be working with other systems like mrt to get things working smoothly and in a less complex way.