[SPIKE] URL Mapping - Dynamic Routing Method #1640
Draft
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 I investigate how we might implement the SEO Url Mapping APIs for custom urls and redirects in the PWA. The predominant difference between this PR and the previous PR is that this solution is not dependant on using the
withReactQuery
HoC and should work once implemented with both legacygetProps
and usingreact-query
.In order to do this, the main integration point was the
routes.jsx
file that is defined in all PWA-Kit projects. Initially this file defined and exported an array of route configurations, later down the line we allows the developers of templates to export a function that returned the same array object. In this PR we go one step further and allow the developer to define an asynchronous function that will return an array of route configurations.In order to make this work we had to update the rendering pipeline to wait on the
getRoutes
function. This does and another link in the chain of calls as does the previous solution, but it seem to be a little more clean.This solution has it's challenges including what to do on the client where it's important we don't block on yet another network request. For that reason you can see that I am serializing the routes and putting them in the applications configuration to be rebuilt on the client-side. So if you, for example, have a custom url called
/hot-summer-deals
that links to a custom category page, we want to ensure that this route exists in the browser on load without having to goto the server again. You can see here and here where those changes were made. (NOTE: there are some wrinkles to iron out in this process as there will be issue with out routes are configured with internationalization) .The Challenge
The challenge in this solution is getting the client side to work. As the API only returns url mappins for any single given url segment we need to ensure that we can update the router dynamically. In order to do this, I'm attempting to build a context that lives inside the Switch component that you can use in conjunction with a hook to modify the routes. So when a user is transitioning from one page to another, we block the transition, then check with the API for a url mapping, if one is found, we update the routes and continue the navigation.
This part of the PR isn't finished yet and it's important that we prove that we can do this before making any decisions.